チェックボックスの状態を配列に格納したい
配列からチェックボックスを生成し、そのチェック状態を配列に格納したいという場面はよく出てくると思います。
例えば
[
{id: 1, name: 'リンゴ'},
{id: 2, name: 'バナナ'},
{id: 3, name: 'グレープ'},
{id: 4, name: 'オレンジ'},
{id: 5, name: 'ピーチ'}
]
このような配列があったとすると、
このようなチェックボックスを表示し、チェックされた要素のid値を配列で取得したい、ということです。仮にバナナとピーチがチェックされたなら、
[2, 5]
このような配列が欲しいのです。
ソースコード
これ単体で動きます。
<!doctype html>
<html ng-app="app" ng-controller="Ctrl">
<meta charset="utf-8">
<title>チェックボックステスト</title>
<ul>
<li ng-repeat="fruit in fruits">
<label><input type="checkbox" ng-model="fruit.checked">{{fruit.name}}</label>
</li>
</ul>
<button ng-click="check()">チェック</button>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
<script>
angular.module('app', []).controller('Ctrl', function($scope) {
$scope.fruits = [
{id: 1, name: 'リンゴ'},
{id: 2, name: 'バナナ'},
{id: 3, name: 'グレープ'},
{id: 4, name: 'オレンジ'},
{id: 5, name: 'ピーチ'}
];
$scope.check = function() {
var checks = [];
angular.forEach($scope.fruits, function(fruit) {
if (fruit.checked) checks.push(fruit.id);
});
console.log(checks);
};
});
</script>
</html>
もっとうまいやり方がありましたら、是非教えてください。