AngularJS选择全部复选框功能

Question

我对 angular 相当陌生，并且有一个全选复选框，该复选框通过 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-checked 和 ng-model。

从文档中：

请注意，[ng-checked ] 指令不应与 ngModel 一起使用，因为这可能会导致意外行为。

— AngularJS ng-checked 指令 API 参考

Answer 2

如果您使用的是item.check只是为了确保选中了哪个复选框，那么您可以执行以下操作：

$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-单击添加到您的选择所有输入，如下所示：

<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);
            }
        });
    }
}