计数和放大器;打印带有AngularJS选中输入 [英] Count & print the checked inputs with AngularJS
本文介绍了计数和放大器;打印带有AngularJS选中输入的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我用NG-重复打印输入框的列表。我该如何计算并打印选中的复选框的数量？
I used ng-repeat to print the list of input checkbox. How do I count and print the number of checked checkboxes?
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.lists = [{'id':'1', 'name':'list 1'},
{'id':'2', 'name':'list 2'},
{'id':'3', 'name':'Macbook Pro'},
{'id':'4', 'name':'Dell Optiplex 755'},
{'id':'5', 'name':'Google Nexus S'}
];
});
HTML
<ul style="padding:10px;">
<input type="text" ng-model="fil.name" />
<li ng-repeat="list in lists | filter:fil">
<div style="margin-bottom:0;" class="checkbox">
<label>
<input type="checkbox" name="list_id[]" value="{{list.id}}" />
{{list.name}}
</label>
</div>
</li>
</ul>
http://plnkr.co/edit/4swnCWen370VhTuca0u2?p=$p$ PVIEW
推荐答案
JS：
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.lists = [
{'id':'1', 'name':'list 1', checked: true},
{'id':'2', 'name':'list 2'},
{'id':'3', 'name':'Macbook Pro'},
{'id':'4', 'name':'Dell Optiplex 755'},
{'id':'5', 'name':'Google Nexus S'}
];
$scope.$watch('lists', function(lists){
$scope.count = 0;
angular.forEach(lists, function(list){
if(list.checked){
$scope.count += 1;
}
})
}, true);
});
查看：
<body ng-controller="MainCtrl">
<ul style="padding:10px;">
<input type="text" ng-model="fil.name" />
<li ng-repeat="list in lists | filter:fil">
<div style="margin-bottom:0;" class="checkbox">
<label>
<input type="checkbox" name="list_id[]" ng-model="list.checked" value="{{list.id}}" />
{{list.name}}
</label>
</div>
</li>
</ul>
<strong>Count: {{count}}</strong>
</body>
这篇关于计数和放大器;打印带有AngularJS选中输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
