AngularJSを使ったcheckboxの値の受け渡し

前提・実現したいこと

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/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

karamarimo

2018/05/17 04:15

$scope.checks という statement がありますが、これは入力し間違いではないですか？

sato1108

2018/05/17 04:20

私の中ではchecks.push(value.checked);の記述でチェックされている値をchecksという変数に入れて、それをhtmlで表示できるように$scope.checksとしているつもりです。

karamarimo

2018/05/17 04:37

チェックされているものだけ checks という配列に入れるという部分のコードは分かるのですが、「$scope.checks」とだけ書いても何も起きないと思いますが...。また、checks という配列の要素として value.checked つまり true が入るわけですが、チェックされているフルーツの「名前」を表示したいわけなので value.name では？

sato1108

2018/05/17 04:52 編集

只今コードを少し修正しました。ご指摘ありがとうございます。しかし、やはり名前が表示されません。コンソールではしっかりとチェックされたフルーツの名前が表示されるのですが・・・

xenbeat

2018/05/17 06:25

質問を「解決済み」にしてください。https://teratail.com/help#resolve-question

行動規範の内容に同意します

回答1件

ベストアンサー

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}