Q&A
$scope.checks という statement がありますが、これは入力し間違いではないですか？
前提・実現したいこと
AngularJSを使って複数のcheckboxを使用し、チェックされた値をhtmlで表示したいのですが、なかなかうまくいってくれません。
下記の<p ng-repeat="data in checks">{{data}}</p>の部分にチェックされたフルーツのフルーツ名が出てほしいと思っています。
知っている方おられましたらご教授いただければと思います。
該当のソースコード
js
1 $scope.fruits = [ 2 {id: 1, name: 'リンゴ'}, 3 {id: 2, name: 'バナナ'}, 4 {id: 3, name: 'グレープ'}, 5 {id: 4, name: 'オレンジ'}, 6 {id: 5, name: 'ピーチ'} 7 ]; 8 $scope.check = function() { 9 var checks = []; 10 angular.forEach($scope.fruits, function(value, index, array) { 11 if (value.checked) { 12 $scope.checks = checks.push(value.name); 13 console.log(value.name); 14 } 15 }); 16}
html
1<html ng-app="myApp"> 2<省略> 3<div ng-controller="AppController"> 4 <ul> 5 <li ng-repeat="fruit in fruits"> 6 <label><input type="checkbox" ng-model="fruit.checked">{{fruit.name}}</label> 7 </li> 8 </ul> 9 <button ng-click="check()">チェック</button> 10 <p ng-repeat="data in checks">{{data}}</p> 11</div> 12<省略> 13</html>
試したこと
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
私の中ではchecks.push(value.checked);の記述でチェックされている値をchecksという変数に入れて、それをhtmlで表示できるように$scope.checksとしているつもりです。
チェックされているものだけ checks という配列に入れるという部分のコードは分かるのですが、「$scope.checks」とだけ書いても何も起きないと思いますが...。また、checks という配列の要素として value.checked つまり true が入るわけですが、チェックされているフルーツの「名前」を表示したいわけなので value.name では？
只今コードを少し修正しました。ご指摘ありがとうございます。しかし、やはり名前が表示されません。コンソールではしっかりとチェックされたフルーツの名前が表示されるのですが・・・
質問を「解決済み」にしてください。https://teratail.com/help#resolve-question
回答1件
0
ベストアンサー
Javascript
1$scope.check = function() { 2 var checks = []; 3 angular.forEach($scope.fruits, function(value, index, array) { 4 if (value.checked) { 5 checks.push(value.name); 6 } 7 }); 8 $scope.checks = checks; 9}
投稿2018/05/17 05:16
総合スコア4258
あなたの回答
tips
プレビュー
