angularjs選擇所有複選框功能

Question

我是相當新的角度和有一個選擇所有複選框，通過ng-model/ng-checked檢查所有框。

<th> 
     <input type="checkbox" id="selectAll" ng-model="selectAll"/> 
    </th> 
    <th> 
     ${Case Number} 
    </th> 
    <tr ng-repeat="item in c.onbCase> 
     <td><input type="checkbox" name="checkbox" ng-click="checkboxFunc(item)" 
        ng-model="item.checked" 
        ng-checked="selectAll || item.checked"/> 
     </td> 
     <td>{{item.number}}</td> 
    </tr> 

我也有一個名爲checkboxFunc功能如被選中，並引發案件編號到一個數組，設置item.selected爲true：

$scope.onbNum = []; 

    $scope.checkboxFunc = function(item){ 
     if(item.selected == false) { 
      if($scope.onbNum.indexOf(item.number)==-1){ 
       $scope.onbNum.push(
        item.number 
       ) 
      } 
      item.selected = true; 
     } else { 
      if($scope.onbNum.indexOf(item.number)!==-1){ 
       var pos = $scope.onbNum.indexOf(item.number); 
       $scope.onbNum.splice(pos,1) 
      } 
      item.selected = false; 
     } 
    } 

雖然選擇點擊時，所有的複選框，檢查所有的箱子我該如何解決我的功能，以便所有的案件號碼都被扔進陣列？

Answer 1

我不知道確切地知道你的問題，但我希望我的回答可以幫助您： 附加NG-點擊你的全選輸入如下圖所示：

<input type="checkbox" id="selectAll" ng-model="selectAll" ng-change="checkAll()" /> 

，也低於函數添加到您控制器：

$scope.checkAll = function() { 
    if ($scope.selectAll == true) { 
     angular.forEach($scope.c.onbCase, function(item) { 
      if ($scope.onbNum.indexOf(item.number) == -1) { 
       $scope.onbNum.push(
        item.number 
       ); 
      } 
     }); 
    } else { 
     angular.forEach($scope.c.onbCase, function (item) { 
      if ($scope.onbNum.indexOf(item.number) !== -1) { 
       var pos = $scope.onbNum.indexOf(item.number); 
       $scope.onbNum.splice(pos, 1); 
      } 
     }); 
    } 

} 

Answer 2

如果您正在使用item.checked只是爲了確保該複選框被選中，那麼你可以做這樣的事情：

$scope.onbCase = [ 
    { number:1, selected:false }, 
    { number:2, selected:false }, 
    { number:3, selected:false } 
    ]; 

這是你的職責：

$scope.onbNum = []; 
    $scope.checkAll = function(){ 
     $scope.onbNum = []; 
     for(var i=0; i<$scope.onbCase.length;i++){ 
      $scope.onbCase[i].selected = $scope.selectAll; 
     } 
     if($scope.selectAll === true){ 
      for(var i=0; i<$scope.onbCase.length;i++){ 
       $scope.onbNum.push($scope.onbCase[i].number); 
      } 
     } 
    } 

$scope.checkboxFunc = function(item){ 
    if(item.selected) { 
     if($scope.onbNum.indexOf(item.number)===-1){ 
      $scope.onbNum.push(
       item.number 
      ) 
     } 
    } 
    else { 
     var pos = $scope.onbNum.indexOf(item.number); 
     if(pos>-1){ 
      $scope.onbNum.splice(pos,1); 
     } 
     $scope.selectAll = false; 
    } 
} 

這裏是你的HTML頁面：

<th> 
     <input type="checkbox" id="selectAll" ng-model="selectAll" 
      ng-click="checkAll()"/> 
    </th> 
    <th> ${Case Number} 
    </th>  

    <tr ng-repeat="item in onbCase"> 
     <td><input type="checkbox" name="checkbox" 
      ng-click="checkboxFunc(item)" ng-model="item.selected" 
      ng-checked="selectAll || item.selected"/> 
     </td> 
     <td>{{item.number}}</td> 
    </tr> 

希望這會工作，或者給你一個想法，你想要什麼。

Answer 3

請勿在同一元素上同時使用ng-checked和ng-model。

從文檔：

注意，[在ng-checked]指令不應該連同ngModel使用，因爲這可能會導致意外的行爲。

— AngularJS ng-checked Directive API Reference