如何使用AngularJS绑定到复选框值列表？

有两种方法可以解决这个问题。使用简单数组或对象数组。每种解决方案都有其优缺点。在下面，您将为每个案例找到一个

使用简单数组作为输入数据

HTML可能看起来像：

&lt；标签ng repeat=“水果中的水果名”&gt；
&lt；输入
type=“复选框”
name=“selectedFruits[]”
value=“{{fruitName}}”
ng checked=“selection.indexOf（水果名）&gt；-1”
ng click=“切换选择（结果名称）”
&燃气轮机；{{fruitName}
&lt/标签&gt；

相应的控制器代码为：

app.controller（'SimpleArrayCtrl'，['$scope'，函数SimpleArrayCtrl（$scope）{
//果实
$scope.fruits=[‘苹果’、‘橘子’、‘梨’、‘那尔杰’]；
//精选水果
$scope.selection=['apple'，'pear']；
//按名称切换给定水果的选择
$scope.toggleSelection=函数toggleSelection（水果名）{
var idx=$scope.selection.indexOf（水果名）；
//当前已选定
如果（idx&gt；-1）{
$scope.selection.splice（idx，1）；
}
//是新选中的
否则{
$scope.selection.push（水果名）；
}
};
}]);

优点：简单的数据结构和按名称切换很容易处理

缺点：添加/删除很麻烦，因为必须管理两个列表（输入和选择）

使用对象数组作为输入数据

HTML可能看起来像：

&lt；标签ng repeat=“水果中的水果”&gt；
&lt--
-使用`value=“{fruit.name}}”`为输入提供一个真实值，以防表单被提交
传统上
-使用'ng checked=“fruit.selected”`根据某个角度表达式选中复选框
（无双向数据绑定）
-使用`ng model=“fruit.selected”`来利用双向数据绑定。请注意，`.已选中`
这是武断的。属性名称可以是任何名称，如果不存在，将在对象上创建属性名称。
--&燃气轮机；
&lt；输入
type=“复选框”
name=“selectedFruits[]”
value=“{fruit.name}”
ng model=“水果。选定”
&燃气轮机；{{fruit.name}
&lt/标签&gt；

相应的控制器代码为：

app.controller（'ObjectArrayCtrl'，['$scope'，'filterFilter'，函数ObjectArrayCtrl（$scope，filterFilter）{
//果实
$scope.fruits=[
{name:'apple'，selected:true}，
{name:'orange'，selected:false}，
{name:'pear'，selected:true}，
{name:'naartjie'，所选：false}
];
//精选水果
$scope.selection=[]；
//获取选定水果的助手方法
$scope.selectedFruits=函数selectedFruits（）{
返回filterFilter（$scope.fruits，{selected:true}）；
};
//观察水果的变化
$scope.$watch（'fruits | filter:{selected:true}'，函数（nv）{
$scope.selection=nv.map（函数（水果）{
返回水果名称；
});
}，对）；
}]);

优点：添加/删除非常简单

缺点：稍微复杂一些的数据结构和按名称切换比较麻烦，或者需要助手方法

演示：http://jsbin.com/ImAqUC/1/