AngularJS でのチェックボックス値のリストへのバインド
複数のチェックボックス値をコントローラー内のリストに関連付けるには、主に 2 つのアプローチがあります: 単純な配列またはオブジェクトの配列を利用します。
単純な配列の使用
HTML 内:
<label ng-repeat="fruitName in fruits"> <input type="checkbox" name="selectedFruits[]" value="{{fruitName}}" ng-checked="selection.indexOf(fruitName) > -1" ng-click="toggleSelection(fruitName)" > {{fruitName}} </label>
コントローラー内:
app.controller('SimpleArrayCtrl', ['$scope', function SimpleArrayCtrl($scope) { $scope.fruits = ['apple', 'orange', 'pear', 'naartjie']; $scope.selection = ['apple', 'pear']; $scope.toggleSelection = function toggleSelection(fruitName) { var idx = $scope.selection.indexOf(fruitName); idx > -1 ? $scope.selection.splice(idx, 1) : $scope.selection.push(fruitName); }; }]);
利点:
欠点:
オブジェクトの配列の使用
HTML 内:
<label ng-repeat="fruit in fruits"> <input type="checkbox" name="selectedFruits[]" value="{{fruit.name}}" ng-model="fruit.selected" > {{fruit.name}} </label>
コントローラー内:
app.controller('ObjectArrayCtrl', ['$scope', 'filterFilter', function ObjectArrayCtrl($scope, filterFilter) { $scope.fruits = [ { name: 'apple', selected: true }, { name: 'orange', selected: false }, { name: 'pear', selected: true }, { name: 'naartjie', selected: false } ]; $scope.selection = []; $scope.selectedFruits = function selectedFruits() { return filterFilter($scope.fruits, { selected: true }); }; $scope.$watch('fruits|filter:{selected:true}', function (nv) { $scope.selection = nv.map(function (fruit) { return fruit.name; }); }, true); }]);
利点:
欠点:
追加メモ:
以上がAngularJS でチェックボックスの値をリストに効率的にバインドするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。