Question

我对角度很新，并且有一个全选复选框，通过ng-model / ng-checked检查所有框。

<span 
    id="textSpan" 
    style={ this.state.checkboxState ? { fontWeight: 'normal' } : { fontWeight: 'bold' } }
>
    { this.props.text }
</span>

我还有一个名为checkboxFunc的函数，如果选中则将item.selected设置为true并将案例编号抛出到数组中：

    <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>

虽然Select All复选框在单击时检查所有框，但如何修复我的函数以便将所有案例编号抛入数组？

Answer 1

请勿在同一元素上同时使用ng-checked和ng-model。

来自文档：

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

— AngularJS ng-checked Directive API Reference

Answer 2

我不确定知道您的问题，但我希望我的回答可以帮助您：添加ng-click到您的selectAll输入，如下所示：

<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 3

如果您使用 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>

希望这会有用，或者让你知道自己想要什么。

angularjs选择所有复选框功能

3 个答案: