Q&A
下記のプログラムを実行したのですが、chromeで開くとうまく実行できません。
原因を教えてください。
index.html
1<!DOCTYPE html> 2<html ng-app="myApp"> 3 4<head> 5 <!-- 見た目用にBootstrapを使う --> 6 <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 7 <!-- AngularJS 1.5を公式サイトから引っ張ってくる --> 8 <script src="//code.angularjs.org/1.5.7/angular.min.js"> 9 </script> 10 <!-- ↓↓↓自分で作ったJavaScriptはここから↓↓↓ --> 11 <script src="app.js"> 12 </script> 13</head> 14 15<body class="container"> 16 <div ng-controller="AppController"> 17 <div> 18 <h1>登録フォーム</h1> 19 <form ng-submit="submit()"> 20 <div class="form-group"> 21 <label for="username">ユーザー名</label> 22 <input type="text" class="form-control" id="username" placeholder="twitterのユーザー名を入力" ng-model="username"> 23 </div> 24 <button type="submit" class="btn btn-primary">登録</button> 25 </form> 26 </div> 27 <hr> 28 <div> 29 <h1>ユーザー一覧</h1> 30 <span ng-if="users.length === 0">ユーザーが一人も登録されていません</span> 31 <ul> 32 <li style="padding: 5px" ng-repeat="user in users"> 33 <div> 34 <a href="{{user.url}}" target="_blank">{{user.username}}</a> 35 <button type="button" class="btn btn-xs btn-danger" ng-click="deleteUser($index)">x</button> 36 </div> 37 </li> 38 </ul> 39 </div> 40 </div> 41 42 </body> 43 44</html> 45
app.js
1 2angular.module('myApp', []) 3 .controller('AppController', function($scope) { 4 // 入力されたユーザー名を保持 5 $scope.username = ''; 6 // ユーザー一覧（空の配列で初期化） 7 $scope.users = []; 8 // 登録を押されたときの関数 9 $scope.submit = function() { 10 // 空だったら何もしない 11 if (!$scope.username) return; 12 // 新しいユーザーをユーザー一覧に登録する 13 $scope.users.push({ 14 username: $scope.username, 15 url: '//twitter.com/' + $scope.username 16 }); 17 // 登録完了したらINPUTを空にしておく 18 $scope.username = ''; 19 }; 20 // ユーザー一覧からユーザーを削除 21 $scope.deleteUser = function(index) { 22 $scope.users.splice(index, 1); 23 }; 24 }); 25
回答1件
0
ベストアンサー
このように修正してみてください。
// は https:// で問題ないです。
html
1<ul ng-if="users.length > 0"> 2 <li style="padding: 5px" ng-repeat="user in users track by $index">
js
1url: 'https://twitter.com/' + $scope.username
投稿2019/06/11 11:34
総合スコア2937
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。