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代碼。如果你想綁定（可能你可能會這樣做）對其他元素進行另一個改變，你可以分開這些函數，並保持你的代碼更清晰和更清晰