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

    }

];

我怎樣才能使第一個復選框基本上只選擇/取消選擇所有其他復選框？

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

 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代碼。 如果你想綁定（最可能你可能會）對其余元素進行另外的更改，你可以分離這些功能並保持你的代碼更清晰，更清潔

Answer 3

你可以這樣做 -

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

只需觀察您的模型是否有任何變化

$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 5

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

希望這會有所幫助!!