選擇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; 
}