javascript 如何计算 Angular 中选中的复选框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20855195/
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
How do I count selected checkboxes in Angular?
提问by Steven
I need to count the number of items I have selected in a list.
我需要计算我在列表中选择的项目数。
I have the following list:
我有以下清单：
<ul>
<li ng-repeat="items in item">
<input type="checkbox" name="item_id[]" />
</li>
</ul>
Is there something like var count = $scope.item.selected.count?
有类似的东西var count = $scope.item.selected.count吗？
update
Thanks to @Stewie I got it working.
更新
感谢@Stewie，我让它工作了。
I ended up using this code:
我最终使用了这个代码：
// Count the number of selected items
$scope.selectedCounter = 0;
$scope.change = function (item) {
if (item.selected) {
$scope.selectedCounter++
} else {
$scope.selectedCounter--
}
};
// HTML
<ul>
<li ng-repeat="item in items">
<input type="checkbox" ng-model="item.selected" ng-change="change(item)" />
</li>
...
</ul>
<span>Count: </span> ({{selectedCounter}})
If you also have a select allcheckbox
如果你也有一个select all复选框
<input type="checkbox" ng-model="selected" class="checkAll" ng-change="selectAll(selected)" />
Then the code will be:
然后代码将是：
$scope.selectAll = function (selected) {
var items = $scope.items;
angular.forEach(items, function (item) {
item.selected = selected;
});
// Update the counter
if(selected){
$scope.selectedCounter = items.length;
} else {
$scope.selectedCounter = 0;
}
};
采纳答案by Stewie
Your use of ngRepeat looks wrong. It should be "item in items" not the other way around. Also, you're not using ng-model on your inputs, which makes it much harder to get the count.
您对 ngRepeat 的使用看起来是错误的。它应该是“项目中的项目”，而不是相反。此外，您没有在输入中使用 ng-model，这使得获得计数变得更加困难。
So, if you add ng-model you can get the count in many different ways, one of which is:
因此，如果您添加 ng-model，您可以通过多种不同方式获得计数，其中之一是：
app.controller('AppController',
[
'$scope',
function($scope) {
$scope.items = [
{id: 1, title: "Can't Hold Us"},
{id: 2, title: "Just Give Me A Reason"},
{id: 3, title: "Mirrors"},
{id: 4, title: "Get Lucky"},
];
$scope.selectedItems = 0;
$scope.$watch('items', function(items){
var selectedItems = 0;
angular.forEach(items, function(item){
selectedItems += item.selected ? 1 : 0;
})
$scope.selectedItems = selectedItems;
}, true);
}
]
);
<body ng-controller="AppController">
<ul>
<li ng-repeat="item in items">
<label>
<input type="checkbox" name="payment_id[]" ng-model="item.selected" /> {{item.title}}
</label>
</li>
</ul>
<div>Selected Items Length: {{selectedItems}}</div>
</body>
