Таблица начальной загрузки Angularjs, выберите все флажки

Наша команда разрабатывает виджет таблицы в 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;
  }
};

Приведенное выше работает для выбора всех, но когда пользователь снова щелкает флажок, строки по-прежнему выбираются. Есть ли что-то, чего нам не хватает? Спасибо!


angularjs bootstrap-table selectall
person Dave    schedule 25.11.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Привяжите флажок к переменной с помощью 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.

person georgeawg    schedule 26.11.2019