前提・実現したいこと
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/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答1件
あなたの回答
tips
プレビュー