Angularjs引导表选择所有复选框

Question

我们的团队正在ServiceNow中开发表格小部件，并希望能够使用复选框选择全部/取消选择所有行。到目前为止，我们的html看起来像这样：

<table class="table table-striped table-responsive" ng-if="data.list.length">
    <thead>
      <tr>
        <th ng-if="options.show_checkboxes">
          <input type="checkbox" ng-click="selectAll()">
        </th> 
        <th ng-repeat="field in data.fields_array track by $index" class="text-nowrap" ng-click="setOrderBy(field)"
         scope="col" role="columnheader" aria-sort="{{field == data.o ? (data.d == 'asc'? 'ascending': 'descending') : 'none'}}">
          <div class="th-title" title="${Sort by} {{field == data.o ? (data.d == 'asc' ?  '${Descending}': '${Ascending}') : '${Ascending}'}}" role="button" tabindex="0" aria-label="{{data.column_labels[field]}}">{{data.column_labels[field]}}</div>
          <i class="fa" ng-if="field == data.o" ng-class="{'asc': 'fa-chevron-up', 'desc': 'fa-chevron-down'}[data.d]"></i>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="item in data.list track by item.sys_id">
        <td ng-if="options.show_checkboxes">
          <input type="checkbox" ng-model="item.selected">
        </td> 
        <td role="cell" class="pointer sp-list-cell" ng-class="{selected: item.selected}" ng-click="go(item.targetTable, item)" ng-repeat="field in ::data.fields_array" data-field="{{::field}}" data-th="{{::data.column_labels[field]}}"><span ng-if="$first" aria-label="${Open record}: {{::item[field].display_value}}" role="link" tabindex="0">{{::item[field].display_value | limitTo : item[field].limit}}{{::item[field].display_value.length > item[field].limit ? '...' : ''}}</span><span ng-if="!$first">{{::item[field].display_value | limitTo : item[field].limit}}{{::item[field].display_value.length > item[field].limit ? '...' : ''}}</span>
        </td>
      </tr>
    </tbody>
</table>

[看过其他一些stackoverflow文章之后，我们在控制器中添加了以下内容：

$scope.selected = {};
$scope.selectAll = function(){
  for (var i = 0; i < $scope.data.list.length; i++) {
    var item = $scope.data.list[i];

    item.selected = true;
  }
};

以上内容可以选择全部，但是当用户再次单击复选框时，仍将选择行。我们缺少什么吗？谢谢！

Answer 1

将复选框绑定到具有ng-model的变量，并使用它来选择/取消选择全部：

<input type="checkbox" ng-change="selectAll(allChecked)" ng-model="allChecked">

$scope.selectAll = function(allChecked){
    $scope.data.list.forEach( item => item.selected = allChecked);
};

然后，当复选框更改为true时，所有项目将被选中；当复选框更改为false时，将取消选择所有项目。