如何使用 AngularJS 绑定到复选框值列表? [英] How do I bind to list of checkbox values with AngularJS?
问题描述
我有几个复选框:
<input type='checkbox' value="apple" checked>
<input type='checkbox' value="orange">
<input type='checkbox' value="pear" checked>
<input type='checkbox' value="naartjie">
我想绑定到我的控制器中的一个列表,这样无论何时更改复选框,控制器都会维护所有选中值的列表,例如,['apple', 'pear']代码>.
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']
.
ng-model 似乎只能将一个复选框的值绑定到控制器中的一个变量.
ng-model seems to only be able to bind the value of one single checkbox to a variable in the controller.
还有其他方法可以将四个复选框绑定到控制器中的列表吗?
Is there another way to do it so that I can bind the four checkboxes to a list in the controller?
推荐答案
有两种方法可以解决这个问题.使用简单数组或对象数组.每个解决方案都有其优点和缺点.您会在下面为每个案例找到一个.
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.
HTML 可能如下所示:
The HTML could look like:
<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) {
// 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
HTML 可能如下所示:
The HTML could look like:
<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>
适当的控制器代码是:
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);
}]);
优点:添加/删除非常简单
缺点:稍微复杂的数据结构和按名称切换很麻烦或需要辅助方法
Cons: Somewhat more complex data structure and toggling by name is cumbersome or requires a helper method
演示:http://jsbin.com/ImAqUC/1/一个>
这篇关于如何使用 AngularJS 绑定到复选框值列表?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!