AngularJs复选框，将在所有其他复选框上选中

Question

我正在使用AngularJs（Angular 1），我需要使用复选框来选择/取消选中所有其他复选框。

现在我有这样的：

<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 ？

Answer 1

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>

Answer 2

你可以不喜欢这个 -

<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; 
}); 
} 

Answer 3

简单地看找你的模型的任何变化

$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; 
       } 

    } 

Answer 4

<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; 
     }) 
} 

希望这会有所帮助！

Answer 5

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代码。如果你想绑定（可能你可能会这样做）对其他元素进行另一个改变，你可以分开这些函数，并保持你的代码更清晰和更清晰