AngularJS:如何绑定到复选框值列表? [英] AngularJS : How to bind to list of checkbox values?
问题描述
我有几个复选框:
<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 e.g. ['apple', 'pear']
.
纳克模型似乎只能单一复选框的值绑定到所述控制器的变量。
ng-model seems to only be able to bind the value of one single checkbox to a variable in the controller.
有另一种方式做到这一点,这样我可以在四个复选框绑定到contrller列表?
Is there another way to do it so that I can bind the four checkboxes to a list in the contrller?
推荐答案
有两种方法来解决这个问题。无论是使用一个简单的数组或对象的数组。每个解决方案都有其优点和缺点。下面你会发现一个每个案例。
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>
和适当的控制器code将是:
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
在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>
和适当的控制器code将是:
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
演示: http://jsbin.com/ImAqUC/1/
这篇关于AngularJS:如何绑定到复选框值列表?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!