选择angularJS中的所有复选框

Question

我是新的AngularJS。我试图用单个复选框选中所有复选框，并执行checkboxClick方法。因为我们将值设定为范围。怎么做？

<input class="check-box" data-val="true" type="checkbox">Select All </input> 
      <table class="table table-bordered"> 
        <tr> 
         <th></th> 
         <th>Printed</th> 
         <th>First Name</th> 
         <th>Last Name</th> 
         <th>Company</th> 
         <th>City</th> 
         <th>Country</th> 
        </tr> 
        <tr ng-repeat="item in items"> 
         <td> 
          <input class="check-box" data-val="true" type="checkbox" ng-model="item.selected" ng-click="checkboxClick($event, item)"> 
          </td> 
          <td> 
          {{item.printed}} 
          </td> 
          .... 
          .... 
         </tr> 
        </table> 

JS

$scope.checkboxClick = function (eventobj, item) { 
     if (eventobj.target.checked) { 
      $scope.selectedItems.push(item); 
      $scope.getLabel(item.id); 
      $scope.getOrderItems(item.id); 
      $scope.getPaymentItems(item.id); 
     } else { 
      $scope.removeItemFromSelection(item); 
     }; 
    }; 

Answer 1

你想要的功能这是通过复选框上的ng-click事件启动的。这也将取消选中所有复选框。它迭代所有项目，改变每个项目的状态。

<input type="checkbox" ng-model="selectAll" ng-click="checkAll()" /> 
    <tr ng-repeat="item in items"> 
     <td> 
      {{item.name}} 
     </td> 
     <td> 
      <input type="checkbox" ng-model="item.Selected" /> 
     </td> 
    </tr> 

控制器可以是这个样子：

angular.module("myApp", []) 
    .controller("checkboxCtrl", function($scope) { 

    $scope.Items = [{ 
     name: "one" 
    }, { 
     name: "two" 
    }, { 
     name: "three" 
    }]; 

    $scope.checkAll = function() { 
     angular.forEach($scope.Items, function (item) { 
      item.Selected = $scope.selectAll; 
     }); 
    }; 
}); 

Answer 2

你可以在你的HTML一个简单的变量做到这一点：

<input class="check-box" data-val="true" type="checkbox" ng-model="item.selected" ng-click="checkboxClick($event, item)" ng-selected="checkAll"> 
<button ng-click="toggleAllCheckboxes()">Check/Uncheck All</button> 

，并在你的控制器：

$scope.checkAll = false; 
$scope.toggleAllCheckboxes = function(){ 
    $scope.checkAll = !$scope.checkAll; 
}