AngularJS dirPagination Выбрать все видимые строки

Question

Я создаю проект управления данными CRUD с использованием Angular и директивы dirPagination и должен иметь флажок «Выбрать все», который выбирает все строки, видимые/без/с помощью jQuery.

Я начал с этого - примечание - я поднимаюсь по кривой углового обучения, и я знаю, что некоторые из них могут быть не «угловым», но я также не хочу начинать возиться (без каламбуров) с кишки dirPagination, Ergo директиву dirPagination:

<tr dir-paginate-start="item in items|filter:filterFunction()|orderBy:sortPredicate:reverse| itemsPerPage: rowsPerPage"> 

и отдельные строки-флажок

<input type="checkbox" class="rowSelector" ng-model="item.isSelected" ng-change="rowSelect($index, $event)"/> status: {{item.isSelected}} 

и соответствующие элементы модели:

$scope.items = [] //subsequently filled 
$scope.rowsPerPage = 5; 
$scope.rowSelect = function (ix, $event) { 
      var checked = (typeof $event == 'undefined') ? false : true; 
      if (!checked) { $scope.masterCheck = false; } 
      var rpp = $scope.rowsPerPage; 
      var p = $scope.__default__currentPage; //dirPagination's current page 
      var start = ((Math.max(0, p - 1) * rpp)); 
      $scope.items[start + ix].isSelected = checked; 
     }; 

это работает должным образом. Установите/снимите отметку с строки, а значение {{item.isSelected}} обновлено в модели и отображается рядом с этим флажком.

Затем я добавил это/снаружи/из dirPagination повтора блока:

<input type="checkbox" id="masterCheckbox" ng-model="masterCheck" ng-click="checkAll()" /> 

и связанного с ним функции в модели:

$scope.masterCheck = false; 
$scope.checkAll = function() { 
      var rpp = $scope.rowsPerPage; 
      var p = $scope.__default__currentPage;   //dirPagination's current page 
      var start = ((Math.max(0, p - 1) * rpp)); 
      var checked = $scope.masterCheck == true; 
      var rows = document.getElementsByClassName("rowSelector"); 
      for (var ix = 0; ix < rows.length; ix++) { 
       rows[ix].checked = checked; 
       $scope.items[start + ix].isSelected = checked; 
      } 
     } 

однако в) проверки checkAll (функция/отключив отдельные строки не отражаются в отображении {{item.isSelected}} каждой строки.

Явных установки отдельного элемента с

$scope.items[start + ix].isSelected = checked; 

, кажется, устанавливают свойство «» IsSelected этого элемента в пределах области действия функции checkAll но дисплей строки не меняется.

Очевидно, что у меня что-то не так, возможно, непонимание проблемы с областью, но на данный момент я в тупике.

Любая помощь очень ценится :-)

Answer 1

свет осенило, наконец.

checkAll(), как написано, пытался получить доступ к каждой строке, вычисляя ее позицию, используя dir-paginate __default__currentPage и Angular's row $ index.

Конечно, это не работает, потому что коллекция элементов [], хранящихся в dir-paginate, подвергается фильтрации и сортировке, поэтому, когда элементы [] действительно проверяются (item.isSelected = true) выбранные элементы/строки жили на невидимых страницах. т. е. мы выбрали неверные индексы.

Одно из решений состоит из следующих -

Мастер CheckBox

<input type="checkbox" id="masterCheckbox" ng-model="masterCheck" ng-click="checkAll()" /> 

строке, флажок (вызовы функций примечание)

<input type="checkbox" class="rowSelector" value="{{sourceIndex('senId',item.senId)}}" ng-model="item.isSelected" ng-click="rowSelect(this)" /> 

директива DIR-постраничной контролирует тег

<dir-pagination-controls on-page-change="onPageChange(newPageNumber)" max-size="15" direction-links="true" boundary-links="true" pagination-id="" template-url=""></dir-pagination-controls> 

и связанное с ними $ значение и функция сферы применения:

 $scope.items = []; 
     $scope.masterCheck = false; 
     $scope.onPageChange = function (newPageNumber) { 
      //clear all selections on page change 
      //dir-paginate provides this hook 
      $scope.masterCheck = false; 
      for (var i in $scope.items) { 
       $scope.items[i].isSelected = false; 
      } 
     } 

     $scope.rowSelect = function (item) { 
      //if one is unchecked have to turn master off 
      if (!item.isSelected) $scope.masterCheck = false; 
     } 

     $scope.sourceIndex = function (keyName, key) { 
      //gets the actual items index for the row key 
      //see here http://stackoverflow.com/questions/21631127/find-the-array-index-of-an-object-with-a-specific-key-value-in-underscore 
      //for the 'getIndexBy' prototype extension 
      var ix = $scope.items.getIndexBy(keyName, key); 
      return ix; 

     } 

     $scope.checkAll = function() { 
      //only visible rows 
      var boxes = document.getElementsByClassName("rowSelector"); 
      for (var bix in boxes) { 
       var ix = boxes[bix].value; 
       $scope.items[ix].isSelected = $scope.masterCheck; 
      } 
     } 

Там, вероятно, лучшим способом, но пока не высокоэффективным это один работает достаточно хорошо для простого народа.

Функция $ scope.sourceIndex() содержит фактический индекс строки источника в строке в качестве значения value = attribute.

Затем функция checkAll() захватывает все видимые строки классом «rowSelector», а затем выполняет итерацию посредством захвата индекса данных из значения флажка и установки соответствующего элемента item.isSelected.

Значение параметра $ scope.onPageChange указано в директиве dir-Paginate controls и гарантирует, что при изменении страницы все выборки строк будут очищены.

Счастливые счастливы.

Answer 2

Ваша переменная masterCheck создается ложь в rowSelect(), а затем в checkAll() вы устанавливаете чек masterCheck, который затем используется для назначения IsSelected

Эта линия является неправильным:

var checked = $scope.masterCheck == true; 

Потому что вы хотите, чтобы перевернуть masterCheck так и должно быть:

$scope.masterCheck = !$scope.masterCheck; 

, а затем

.isSelected = $scope.masterCheck; 

Вы не были когда-либо установкой $ scope.masterCheck истина, так что всегда была ложной, и так как ваши значения IsSelected зависели от него, они всегда были ложными. Кроме того, эти функции как checkAll/unCheckAll сделать это только проверить все изменения на следующее:

$scope.masterCheck = !$scope.masterCheck; 
var checked = $scope.masterCheck == true;