在angularjs中选择checkall时触发所有复选框事件答案

【问题标题】：triggering all the checkbox event while selecting checkall in angularjs在angularjs中选择checkall时触发所有复选框事件
【发布时间】：2016-06-25 04:13:26
【问题描述】：

<table class="table">
<thead>
            <th> <input type='checkbox' name='selectall' ng-model="value1" ng-click="selectAll()"></th>
            <th>  Name </th>
        </thead>
        <tr ng-repeat="x in items">
            <td><input type='checkbox' ng-model="value2" ng-true-value="YES" ng-false-value="NO" ng-click="select($event,x.id)"
                            /></td>
            <td>{{x.name}}</td>
            </tr>
        </tr>
    </table>

当我单击“selectall()”复选框时如何获取所有 item.id？

另外，你能建议我为 ng-repeat 复选框推荐合适的 ng-model 语法吗？

谢谢，拉贾K

【问题讨论】：

标签： angularjs rest checkbox

【解决方案1】：

亲爱的，

这里只是一个帮助参考。你的问题。我已经给出了选择所有记录的方案。 因此根据需要进行修改。

<button ng-click="selectAll()">select all</button>
<div ng-repeat="item in items">
  <label>
    {{item.n}}:
    <input type="checkbox" ng-model="selected[item.id]">
  </label>
</div>

而在控制器中，只需在 selected 中将所有项目设置为 true：

$scope.selected = {};
$scope.selectAll = function(){
  for (var i = 0; i < $scope.items.length; i++) {
    var item = $scope.items[i];

    $scope.selected[item.id] = true;
  }
};

感谢和欢呼

【讨论】：

【解决方案2】：

看看这个例子，你可以看到复选框值是如何变化的，

使用复选框时使用 ng-change 而不是 ng-click

// the main (app) module
var myApp = angular.module("myApp", []);

// add a controller
myApp.controller("myCtrl", function($scope) {
  
  $scope.value1 = "NO";
  $scope.items = [{
    id: 1,
    check: "NO",
    name: "A"
  }, {
    id: 2,
    check: "NO",
    name: "B"
  }, {
    id: 3,
    check: "NO",
    name: "C"
  }, {
    id: 4,
    check: "NO",
    name: "D"
  }, {
    id: 5,
    check: "NO",
    name: "E"
  }, {
    id: 6,
    check: "NO",
    name: "F"
  }, {
    id: 7,
    check: "NO",
    name: "G"
  }, {
    id: 8,
    check: "NO",
    name: "H"
  }];
  $scope.selectAll = function() {
    angular.forEach($scope.items, function(elem) {
      elem.check = $scope.value1;
    })
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="myApp" ng-controller="myCtrl">
  <table class="table">
    <thead>
      <th>
        <input type='checkbox' name='selectall' ng-true-value="YES" ng-false-value="NO" ng-model="value1" ng-change="selectAll()">{{value1}}
      </th>
      <th>Name</th>
    </thead>
    <tbody>
      <tr ng-repeat="x in items">
        <td>
          <input type='checkbox' ng-model="x.check" ng-true-value="YES" ng-false-value="NO" ng-change="select($event,x.id)" /> {{x.check}}
        </td>
        <td>{{x.name}}</td>
      </tr>
    </tbody>
  </table>
</body>

【讨论】：

【解决方案3】：

var myapp = angular.module('app', []);
myapp.controller('Ctrl', function ($scope) {
  var vm = this;
    vm.data = {
      items: [
         {id:1,name:"ali",selected: "NO"},
         {id:2,name:"reza",selected: "NO"},
         {id:3,name:"amir",selected: "NO"}
      ]
     };
  
  vm.value1 = false;
  
  vm.selectAll = function($event){
     var checkbox = $event.target;
     var selected = "NO";
         if(checkbox.checked)
           {
           selected = "YES";
           }
    else {
      selected = "NO";
      }
    angular.forEach(vm.data.items, function(item) {
             item.selected = selected;
             });
    
         
         
   
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="Ctrl as vm">
<table class="table">
<thead>
            <th> <input type='checkbox' name='selectall' ng-model="value1" ng-click="vm.selectAll($event)"></th>
            <th>  All </th>
        </thead>
        <tr ng-repeat="x in vm.data.items">
            <td><input type='checkbox' ng-model="vm.data.items[$index].selected" ng-true-value="YES" ng-false-value="NO" ng-click="vm.select($event,x.id)"
                            /></td>
            <td>{{x.name}}</td>
            
        </tr>
    </table>

</div>

【讨论】：