AngularJS dirPagination选择所有可见行

Question

我正在使用dirPagination指令构建CRUD数据管理项目，需要有一个"select all“复选框，该复选框选择所有可见的/不存在的/使用jQuery的行。

我从这个注意事项开始--我正在攀爬角度学习曲线，并且意识到这可能不是“角度方式”，但我也不想开始摆弄(不使用双关语) dirPagination的内核，因此，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-页面的__default__currentPage和角的行$index来计算其位置来访问每一行。

当然，这是不起作用的，因为dir分页保存的items[]集合已经接受了筛选和排序，所以当items[]被选中(item.isSelected = true)时，所选的项/行处于不可见的页面上。也就是说-我们选错了索引。

一种解决方案包括以下几个方面-

主复选框

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

行复选框(note函数调用)

<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值和函数：

       $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=属性值填充到行复选框中。

checkAll()函数然后通过"rowSelector“类获取所有可见行，然后迭代那些从复选框值抓取数据索引并设置适当的item.isSelected。

$scope.onPageChange在dir-Paginate指令中指定，并确保当页面更改时，所有行选择都被清除。

快乐快乐。

Answer 2

变量masterCheck在rowSelect()中被设置为false，随后在checkAll()中将设置为masterCheck，然后用于分配isSelected

这句话是错的：

var checked = $scope.masterCheck == true;

因为您想翻转masterCheck，所以应该是：

$scope.masterCheck = !$scope.masterCheck;

然后

.isSelected = $scope.masterCheck;

您从未将$scope.masterCheck设置为true，因此它始终是假的，而且由于您的isSelected值依赖于它，所以它们始终是假的。此外，它作为checkAll/unCheckAll来使其只检查对以下内容的所有更改：

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