选中AngularJS中的所有复选框 [英] Check all check boxes in AngularJS
问题描述
我是AngularJS的新人。请查看以下内容：
< img src =https://i.stack.imgur.com/B0K2J.pngalt =enter image description here>
现在用户点击全部链接时，应选中所有 11个复选框，当用户点击无链接时，应取消选中所有 11个复选框。 / p>
此外，当用户选中所有其他复选框时，应选中所有底部的 9个复选框取消选中所有其他复选框，所有底部的 9个复选框应取消选中。
实现一个任务一次，而不是同时。
那么，任何人都可以帮助我同时实现这两个任务吗？
任何帮助将不胜感激。
您可以使用
HTML
< body ng-controller =MainCtrl>
< button ng-click =selectAll（）>全选< / button>
< button ng-click =clearAll（）>全部清除< / button>
< input type =checkboxng-model =selectng-click =checkAll（）/>
< br />
< p>复选框< / p>
< input type =checkboxng-repeat =c in checkboxng-model =checkbox [$ index] .selected>
< / body>
Angular
var app = angular.module（'plunker'，[]）;
app.controller（'MainCtrl'，function（$ scope）{
$ scope.checkbox = [
{
selected：false
}
{
selected：false
}，
{
选择：false
}
];
//检查/取消选中所有框
$ scope.selectAll = function（）{
$ scope.select = true;
angular.forEach（$ scope.checkbox，function（obj）{
obj。 selected = true;
}）;
};
$ scope.clearAll = function（）{
$ scope.select = false;
angular .forEach（$ scope.checkbox，function（obj）{
obj.selected = false;
}）;
};
$ scope.checkAll = function （）{
angular.forEach（$ scope.checkbox，function（obj）{
obj.selected = $ scope.select;
}）;
};
}）;
请参阅 fiddle
I'm new in AngularJS. Please have look to this:
Now when user clicks on "All" link, all the 11 check boxes should be checked and when user clicks on "None" link, all the 11 check boxes should be unchecked.
Plus when user check the All others check box, all the bottom 9 check boxes should be checked and when user uncheck the All others check box, all the bottom 9 check boxes should be unchecked.
I'm able to achieve one of the task at a time, but not simultaneously. So, can anybody please help me to achieve both the tasks simultaneously?
Any help would be appreciated.
You can use
HTML
<body ng-controller="MainCtrl">
<button ng-click="selectAll()">Select All</button>
<button ng-click="clearAll()">Clear All</button>
<input type="checkbox" ng-model="select" ng-click="checkAll()" />
<br />
<p>Checkboxes</p>
<input type="checkbox" ng-repeat="c in checkbox" ng-model="checkbox[$index].selected">
</body>
Angular
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.checkbox = [
{
selected: false
},
{
selected: false
},
{
selected: false
}
];
// Check/uncheck all boxes
$scope.selectAll = function () {
$scope.select = true;
angular.forEach($scope.checkbox, function (obj) {
obj.selected = true;
});
};
$scope.clearAll = function () {
$scope.select = false;
angular.forEach($scope.checkbox, function (obj) {
obj.selected = false;
});
};
$scope.checkAll = function () {
angular.forEach($scope.checkbox, function (obj) {
obj.selected = $scope.select;
});
};
});
Refer fiddle
这篇关于选中AngularJS中的所有复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
![< img src =https://i.stack.imgur.com/B0K2J.pngalt =enter image description here>](\"https://i.stack.imgur.com/B0K2J.png\"){kind=link}