我有一些复选框:
<input type='checkbox' value="apple" checked>
<input type='checkbox' value="orange">
<input type='checkbox' value="pear" checked>
<input type='checkbox' value="naartjie">
我想绑定到我的控制器中的一个列表,这样每当一个复选框被更改时,控制器就会维护一个包含所有选中值的列表,例如,['apple', 'pear']。
Ng-model似乎只能将一个复选框的值绑定到控制器中的一个变量。
是否有其他方法可以将这四个复选框绑定到控制器中的列表?
使用$index字符串可以帮助使用选定值的hashmap:
<ul>
<li ng-repeat="someItem in someArray">
<input type="checkbox" ng-model="someObject[$index.toString()]" />
</li>
</ul>
这样ng-model对象就用表示索引的键更新了。
$scope.someObject = {};
一段时间后$scope。someObject应该看起来像这样:
$scope.someObject = {
0: true,
4: false,
1: true
};
这种方法并不适用于所有情况,但很容易实现。
有一种方法可以通过ng-model-options="{getterSetter: true}"直接处理数组并同时使用ng-model。
诀窍是在ng-model中使用getter/setter函数。通过这种方式,你可以使用一个数组作为你的真实模型,并“伪造”输入模型中的布尔值:
<label ng-repeat="fruitName in ['apple', 'orange', 'pear', 'naartjie']">
<input
type="checkbox"
ng-model="fruitsGetterSetterGenerator(fruitName)"
ng-model-options="{ getterSetter: true }"
> {{fruitName}}
</label>
$scope.fruits = ['apple', 'pear']; // pre checked
$scope.fruitsGetterSetterGenerator = function(fruitName){
return function myGetterSetter(nowHasFruit){
if (nowHasFruit !== undefined){
// Setter
fruitIndex = $scope.fruits.indexOf(fruit);
didHaveFruit = (fruitIndex !== -1);
mustAdd = (!didHaveFruit && nowHasFruit);
mustDel = (didHaveFruit && !nowHasFruit);
if (mustAdd){
$scope.fruits.push(fruit);
}
if (mustDel){
$scope.fruits.splice(fruitIndex, 1);
}
}
else {
// Getter
return $scope.user.fruits.indexOf(fruit) !== -1;
}
}
}
注意:如果你的数组很大,你不应该使用这个方法,因为myGetterSetter会被调用很多次。
要了解更多信息,请参见https://docs.angularjs.org/api/ng/directive/ngModelOptions。
在HTML中(假设复选框位于表中每一行的第一列)。
<tr ng-repeat="item in fruits">
<td><input type="checkbox" ng-model="item.checked" ng-click="getChecked(item)"></td>
<td ng-bind="fruit.name"></td>
<td ng-bind="fruit.color"></td>
...
</tr>
在controllers.js文件:
// The data initialization part...
$scope.fruits = [
{
name: ....,
color:....
},
{
name: ....,
color:....
}
...
];
// The checked or not data is stored in the object array elements themselves
$scope.fruits.forEach(function(item){
item.checked = false;
});
// The array to store checked fruit items
$scope.checkedItems = [];
// Every click on any checkbox will trigger the filter to find checked items
$scope.getChecked = function(item){
$scope.checkedItems = $filter("filter")($scope.fruits,{checked:true});
};