Html AngularJS 将复选框的值添加到数组
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17030748/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS add value of checkboxes to an array
提问by Rodrigo Zurek
I have this code:
我有这个代码：
<tr ng-repeat="doc in providers">
<td><input type="checkbox" ng-true-value="{{doc.provider.Id}}" ng-false-value="" ng-model="ids"></td>
</tr>
{{ids}}
i want to get the values of the checkboxes on an array
我想获取数组上复选框的值
回答by Dan
ng-true-valueonly accepts strings so you'll need to use a workaround. This has been a feature requestfor some time. In the meantime, you can do this:
ng-true-value只接受字符串，因此您需要使用解决方法。这是一段时间以来的功能请求。与此同时，你可以这样做：
Create an idsobject in the controller like:
ids在控制器中创建一个对象，如：
$scope.ids = {};
and change ng-modelto reference a key in that object. You can use the default true/falsecheckbox values:
并更改ng-model为引用该对象中的键。您可以使用默认true/false复选框值：
<td><input type="checkbox" ng-model="ids[doc.provider.Id]"></td>
Then you can loop over the keys in idschecking for true.
然后，您可以遍历键以ids检查true.
回答by RevNoah
I found that this directiveprovided the functionality I was looking for. The main problem I ran into with the more common solutions is that I have two arrays which I needed to store data compatible with a multi select list. The checklistModel directive provides this very basic functionality and works with multiple models.
我发现这个指令提供了我正在寻找的功能。我在使用更常见的解决方案时遇到的主要问题是我有两个数组，我需要它们来存储与多选列表兼容的数据。checklistModel 指令提供了这个非常基本的功能并适用于多个模型。
回答by threeve
I will start by saying that I really don't like the options for doing this in angular. I can't even say that this is better than the accepted answer, but it does keep the data in the model.
我首先要说的是，我真的不喜欢在 angular 中执行此操作的选项。我什至不能说这比接受的答案更好，但它确实将数据保留在模型中。
Markup:
标记：
<tr ng-repeat='(index, doc) in provider'>
<td><input type='checkbox' ng-true-value='{{doc.provider.Id}}' ng-model='ids[index]' /></td>
</tr>
<span ng-repeat='id in ids'>{{id}} </span>
Now just $watch the array value and filter when it changes in the controller (make sure to pass the object equality parameter):
现在只需 $watch 数组值并在控制器中更改时进行过滤（确保传递对象相等参数）：
$scope.ids = [];
$scope.updateIds = function() {
$scope.ids = $scope.ids.filter(function(id) {
return !!id;
});
};
$scope.$watch('ids', $scope.updateIds, true);
When I started answering this question, I thought the most idiomatic options would be to add an ng-change directive on the input:
当我开始回答这个问题时，我认为最惯用的选项是在输入中添加一个 ng-change 指令：
<input type='checkbox' ng-true-value='{{doc.provider.Id}}' ng-model='ids[index]' ng-change='updateIds()'/>
Unfortunately this does not work as expected. The UI doesn't update properly when removing values. I also want to point out that you can do this without the repeat directive:
不幸的是，这不能按预期工作。删除值时 UI 不会正确更新。我还想指出，您可以在没有重复指令的情况下执行此操作：
<input type='checkbox' ng-true-value='1' ng-model='ids.0' />
<input type='checkbox' ng-true-value='2' ng-model='ids.1' />
<input type='checkbox' ng-true-value='3' ng-model='ids.2' />
<input type='checkbox' ng-true-value='4' ng-model='ids.3' />
<input type='checkbox' ng-true-value='5' ng-model='ids.4' />
<input type='checkbox' ng-true-value='6' ng-model='ids.5' />
In this case, the $watch is definitely better than adding the ng-change to each input. Finally, here is a working plunkr. The $watch function does end up running twice each time a box is checked or unchecked, but that's really how it has to be!
在这种情况下， $watch 绝对比为每个输入添加 ng-change 更好。最后，这是一个工作plunkr。每次选中或取消选中一个框时， $watch 函数最终都会运行两次，但这确实是必须的！
