本文翻译自:How do I bind to list of checkbox values with AngularJS?
I have a few checkboxes: 我有几个复选框:
<input type='checkbox' value="apple" checked>
<input type='checkbox' value="orange">
<input type='checkbox' value="pear" checked>
<input type='checkbox' value="naartjie">
That I would like to bind to a list in my controller such that whenever a checkbox is changed the controller maintains a list of all the checked values, for example, ['apple', 'pear']
. 我想绑定到我的控制器中的列表,这样每当复选框被更改时,控制器都会保留所有已检查值的列表,例如['apple', 'pear']
。
ng-model seems to only be able to bind the value of one single checkbox to a variable in the controller. ng-model似乎只能将一个复选框的值绑定到控制器中的变量。
Is there another way to do it so that I can bind the four checkboxes to a list in the controller? 还有另一种方法可以将四个复选框绑定到控制器中的列表吗?
#1楼
参考:https://stackoom.com/question/ytsD/如何使用AngularJS绑定到复选框值列表
#2楼
I think the easiest workaround would be to use 'select' with 'multiple' specified: 我认为最简单的解决方法是使用'select'并指定'multiple':
<select ng-model="selectedfruit" multiple ng-options="v for v in fruit"></select>
Otherwise, I think you'll have to process the list to construct the list (by $watch()
ing the model array bind with checkboxes). 否则,我认为你必须处理列表来构造列表(通过$watch()
模型数组绑定与复选框)。
#3楼
<input type='checkbox' ng-repeat="fruit in fruits"
ng-checked="checkedFruits.indexOf(fruit) != -1" ng-click="toggleCheck(fruit)">
. 。
function SomeCtrl ($scope) {
$scope.fruits = ["apple, orange, pear, naartjie"];
$scope.checkedFruits = [];
$scope.toggleCheck = function (fruit) {
if ($scope.checkedFruits.indexOf(fruit) === -1) {
$scope.checkedFruits.push(fruit);
} else {
$scope.checkedFruits.splice($scope.checkedFruits.indexOf(fruit), 1);
}
};
}
#4楼
Here's a quick little reusable directive that seems to do what you're looking to do. 这是一个快速的小型可重用指令,似乎可以做你想做的事情。 I've simply called it checkList
. 我简单地称它为checkList
。 It updates the array when the checkboxes change, and updates the checkboxes when the array changes. 它会在复选框更改时更新阵列,并在阵列更改时更新复选框。
app.directive('checkList', function() {
return {
scope: {
list: '=checkList',
value: '@'
},
link: function(scope, elem, attrs) {
var handler = function(setup) {
var checked = elem.prop('checked');
var index = scope.list.indexOf(scope.value);
if (checked && index == -1) {
if (setup) elem.prop('checked', false);
else scope.list.push(scope.value);
} else if (!checked && index != -1) {
if (setup) elem.prop('checked', true);
else scope.list.splice(index, 1);
}
};
var setupHandler = handler.bind(null, true);
var changeHandler = handler.bind(null, false);
elem.bind('change', function() {
scope.$apply(changeHandler);
});
scope.$watch('list', setupHandler, true);
}
};
});
Here's a controller and a view that shows how you might go about using it. 这是一个控制器和一个显示如何使用它的视图。
<div ng-app="myApp" ng-controller='MainController'>
<span ng-repeat="fruit in fruits">
<input type='checkbox' value="{{fruit}}" check-list='checked_fruits'> {{fruit}}<br />
</span>
<div>The following fruits are checked: {{checked_fruits | json}}</div>
<div>Add fruit to the array manually:
<button ng-repeat="fruit in fruits" ng-click='addFruit(fruit)'>{{fruit}}</button>
</div>
</div>
app.controller('MainController', function($scope) {
$scope.fruits = ['apple', 'orange', 'pear', 'naartjie'];
$scope.checked_fruits = ['apple', 'pear'];
$scope.addFruit = function(fruit) {
if ($scope.checked_fruits.indexOf(fruit) != -1) return;
$scope.checked_fruits.push(fruit);
};
});
(The buttons demonstrate that changing the array will also update the checkboxes.) (按钮表明更改阵列也会更新复选框。)
Finally, here is an example of the directive in action on Plunker: http://plnkr.co/edit/3YNLsyoG4PIBW6Kj7dRK?p=preview 最后,这是一个关于Plunker的指令实例: http ://plnkr.co/edit/3YNLsyoG4PIBW6Kj7dRK?p = preview
#5楼
There are two ways to approach this problem. 有两种方法可以解决这个问题。 Either use a simple array or an array of objects. 使用简单数组或对象数组。 Each solution has it pros and cons. 每种解决方案都有它的优点和缺点。 Below you'll find one for each case. 下面你会发现每个案例一个。
With a simple array as input data 用简单的数组作为输入数据
The HTML could look like: 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>
And the appropriate controller code would be: 适当的控制器代码将是:
app.controller('SimpleArrayCtrl', ['$scope', function SimpleArrayCtrl($scope) {
// Fruits
$scope.fruits = ['apple', 'orange', 'pear', 'naartjie'];
// Selected fruits
$scope.selection = ['apple', 'pear'];
// Toggle selection for a given fruit by name
$scope.toggleSelection = function toggleSelection(fruitName) {
var idx = $scope.selection.indexOf(fruitName);
// Is currently selected
if (idx > -1) {
$scope.selection.splice(idx, 1);
}
// Is newly selected
else {
$scope.selection.push(fruitName);
}
};
}]);
Pros : Simple data structure and toggling by name is easy to handle 优点 :简单的数据结构和按名称切换很容易处理
Cons : Add/remove is cumbersome as two lists (the input and selection) have to be managed 缺点 :添加/删除很麻烦,因为必须管理两个列表(输入和选择)
With an object array as input data 使用对象数组作为输入数据
The HTML could look like: HTML可能如下所示:
<label ng-repeat="fruit in fruits">
<!--
- Use `value="{{fruit.name}}"` to give the input a real value, in case the form gets submitted
traditionally
- Use `ng-checked="fruit.selected"` to have the checkbox checked based on some angular expression
(no two-way-data-binding)
- Use `ng-model="fruit.selected"` to utilize two-way-data-binding. Note that `.selected`
is arbitrary. The property name could be anything and will be created on the object if not present.
-->
<input
type="checkbox"
name="selectedFruits[]"
value="{{fruit.name}}"
ng-model="fruit.selected"
> {{fruit.name}}
</label>
And the appropriate controller code would be: 适当的控制器代码将是:
app.controller('ObjectArrayCtrl', ['$scope', 'filterFilter', function ObjectArrayCtrl($scope, filterFilter) {
// Fruits
$scope.fruits = [
{ name: 'apple', selected: true },
{ name: 'orange', selected: false },
{ name: 'pear', selected: true },
{ name: 'naartjie', selected: false }
];
// Selected fruits
$scope.selection = [];
// Helper method to get selected fruits
$scope.selectedFruits = function selectedFruits() {
return filterFilter($scope.fruits, { selected: true });
};
// Watch fruits for changes
$scope.$watch('fruits|filter:{selected:true}', function (nv) {
$scope.selection = nv.map(function (fruit) {
return fruit.name;
});
}, true);
}]);
Pros : Add/remove is very easy 优点 :添加/删除非常简单
Cons : Somewhat more complex data structure and toggling by name is cumbersome or requires a helper method 缺点 :更复杂的数据结构和按名称切换是麻烦的或需要帮助方法
Demo : http://jsbin.com/ImAqUC/1/ 演示 : http : //jsbin.com/ImAqUC/1/
#6楼
Since you accepted an answer in which a list was not used, I'll assume the answer to my comment question is "No, it doesn't have to be a list". 由于您接受了未使用列表的答案,我将假设我的评论问题的答案是“不,它不必是列表”。 I also had the impression that maybe you were rending the HTML server side, since "checked" is present in your sample HTML (this would not be needed if ng-model were used to model your checkboxes). 我也有这样的印象,也许你是在渲染HTML服务器端,因为样本HTML中存在“已检查”(如果使用ng-model对复选框进行建模,则不需要这样做)。
Anyway, here's what I had in mind when I asked the question, also assuming you were generating the HTML server-side: 无论如何,这是我在问这个问题时的想法,也假设您正在生成HTML服务器端:
<div ng-controller="MyCtrl"
ng-init="checkboxes = {apple: true, orange: false, pear: true, naartjie: false}">
<input type="checkbox" ng-model="checkboxes.apple">apple
<input type="checkbox" ng-model="checkboxes.orange">orange
<input type="checkbox" ng-model="checkboxes.pear">pear
<input type="checkbox" ng-model="checkboxes.naartjie">naartjie
<br>{{checkboxes}}
</div>
ng-init allows server-side generated HTML to initially set certain checkboxes. ng-init允许服务器端生成的HTML初始设置某些复选框。