AngularJs复选框，将在所有其他复选框上选中
问题描述：
我正在使用AngularJs（Angular 1），我需要使用复选框来选择/取消选中所有其他复选框。AngularJs复选框，将在所有其他复选框上选中
现在我有这样的：
<li ng-repeat="item in ctrl.items">
<input type="checkbox" ng-model="item.selected">{{item.name}}
</li>
然后，我有这个控制器：
ctrl.items = [
{
value: 0,
name: 'Select All/Unselect all other checkboxes',
selected: true
},
{
value: 1,
name: 'myCheckbox1',
selected: true
},
{
value: 2,
name: 'myCheckbox2',
selected: true
},
{
value: 3,
name: 'myCheckbox2',
selected: true
}
];
我怎样才能让这个第一个复选框基本上只是选择/取消选择所有其他checkbboxes ？
答
angular.module('app',[]).controller('MyController', function(){
var ctrl = this;
ctrl.changed = function(item){
if(item.value == 0)
for(var x of ctrl.items)
x.selected = item.selected;
}
ctrl.items = [
{
value: 0,
name: 'Select All/Unselect all other checkboxes',
selected: true
},
{
value: 1,
name: 'myCheckbox1',
selected: true
},
{
value: 2,
name: 'myCheckbox2',
selected: true
},
{
value: 3,
name: 'myCheckbox2',
selected: true
}
];
})<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app' ng-controller='MyController as ctrl'>
<li ng-repeat="item in ctrl.items">
<input type="checkbox" ng-model="item.selected" ng-change='ctrl.changed(item)'>{{item.name}}
</li>
</div>
答
你可以不喜欢这个 -
<li ng-repeat="item in ctrl.items">
<input type="checkbox" ng-model="item.selected" ng-onchange="selectAll()">{{item.name}}
</li>
然后在控制器（可以用于切换添加条件） -
selectAll(){
angular.forEach(items,(item)=>{
item.selected=true;
});
}
答
简单地看找你的模型的任何变化
$scope.$watch('item.selected', function() {
if ($scope.item.selected == 0){
$scope.myCheckbox1.selected= false;
$scope.myCheckbox2.selected= false;
$scope.myCheckbox3.selected= false;
} else {
$scope.myCheckbox1.selected= true;
$scope.myCheckbox2.selected= true;
$scope.myCheckbox3.selected= true;
}
}
答
<li ng-repeat="item in ctrl.items">
<input type="checkbox" ng-model="item.selected" ng-change="all(item)">{{item.name}}
</li>
all(firstItem){
if(firstItem.value == 0)
angular.forEach(ctrl, function(item, key){
item.selected = firstItem.selected;
})
}
希望这会有所帮助！
+0
代码方法是完全正确的，但通过这种方式，您可以将所有函数调用到所有复选框。这不是用户想要的。 – quirimmo
+0
请参阅最新的代码 –
答
angular.module('app',[]).controller('MyController', function(){
var ctrl = this;
ctrl.changed = function(item){
ctrl.items.forEach((el, index) => {
el.selected = ctrl.items[0].selected;
});
}
ctrl.items = [
{
value: 0,
name: 'Select All/Unselect all other checkboxes',
selected: true
},
{
value: 1,
name: 'myCheckbox1',
selected: true
},
{
value: 2,
name: 'myCheckbox2',
selected: true
},
{
value: 3,
name: 'myCheckbox2',
selected: true
}
];
})<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app' ng-controller='MyController as ctrl'>
<li ng-repeat="item in ctrl.items">
<label ng-if="$index === 0" >
<input type="checkbox" ng-model="item.selected" ng-change="ctrl.changed(item)">{{item.name}}
</label>
<label ng-if="$index > 0" >
<input type="checkbox" ng-model="item.selected">{{item.name}}
</label>
</li>
</div>为什么分裂的元素？因为你需要在第一个元素上调用ng-change代码。如果你想绑定（可能你可能会这样做）对其他元素进行另一个改变，你可以分开这些函数，并保持你的代码更清晰和更清晰
这将触发任何选中的复选框上的操作，不仅仅是OP想要的第一个。 – rrd