我正在使用Angular和dirPagination指令构建一个CRUD数据管理项目,需要有一个"全选"复选框,用于选择所有可见/不可见/使用jQuery的行。
我从这个开始——注意——我正在攀登Angular学习曲线,我意识到这其中的一些/所有可能不是"Angular方式",但我也不想开始摆弄(不是双关语(dirPagination的内脏,也就是dirPaginationdirective:
<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}}值将在模型中更新并显示在复选框旁边。
然后我添加了这个/外部/目录分页重复块:
<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;
似乎在checkAll函数的范围内设置了该项的"isSelected"属性,但行显示不变。
很明显,我错了,也许误解了范围问题,但在这一点上,我被难住了。
非常感谢您的帮助:-(
天终于亮了。
checkAll((试图通过使用dir paginate的__default__currentPage和Angular的row$index计算其位置来访问每一行。
当然,这不起作用,因为dir paginate持有的items[]集合已经过筛选和排序,所以当items[]确实被检查时(item.isSelected=true(,所选的项目/行位于不可见的页面上。即,我们选择了错误的索引。
一种解决方案包括以下内容-
主复选框
<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值和函数:
$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;
}
}
可能有更好的方法,但尽管效率不高,但这一方法对普通人来说足够有效。
函数的作用是:将实际的源行索引作为其值=属性值填充到行复选框中。
checkAll((函数然后通过"rowSelector"类获取所有可见行,然后遍历那些从复选框值中获取数据索引并设置适当项的行。iSelected.
$scope.onPageChange是在dir Paginate controls指令中指定的,它确保在页面更改时清除所有行选择。
快乐快乐。
您的变量masterCheck在rowSelect((中被设置为false,随后在checkAll((中,您将checked设置为masterCheck,然后用于分配isSelected
这行错了:
var checked = $scope.masterCheck == true;
因为你想翻转masterCheck,所以它应该是:
$scope.masterCheck = !$scope.masterCheck;
然后
.isSelected = $scope.masterCheck;
您从未将$scope.masterCheck设置为true,所以它总是false,并且由于您的isSelected值依赖于它,所以它们总是false。此外,这起到checkAll/unCheckAll的作用,使其仅检查对以下内容的所有更改:
$scope.masterCheck = !$scope.masterCheck;
var checked = $scope.masterCheck == true;