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