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

＆＃13;

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

＆＃13;

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

＆＃13;

为什么拆分元素？因为您需要在第一个元素上调用ng-change代码。如果你想绑定（尽可能你可能会做）其他元素的另一个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;
        })
}

希望这会有所帮助!!

AngularJs将在所有其他复选框上切换选中的复选框

5 个答案: