AngularJS dirPagination Select 所有可见行
AngularJS dirPagination Select All Visible Rows
我正在使用 Angular 和 dirPagination 指令构建一个 CRUD 数据管理项目,需要有一个 "select all" 复选框来选择所有可见的行/不使用/使用 jQuery.
我从这个开始 - 注意 - 我正在攀登 Angular 学习曲线并且知道 some/all 这可能不是 "the Angular way" 但我也不想开始摆弄(没有双关语)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;
};
按预期工作。 Check/uncheck 一行和 {{item.isSelected}} 值在模型中更新并显示在复选框旁边。
然后我在 dirPagination 重复块的 /outside/ 添加了这个:
<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() 函数中 checking/unchecking 各个行不会反映在每一行的 {{item.isSelected}} 显示中。
使用
明确设置单个项目
$scope.items[start + ix].isSelected = checked;
似乎在checkAll函数的范围内设置了那个项目的'isSelected' 属性但是行显示没有改变。
显然我有问题,可能误解了范围问题,但在这一点上我很困惑。
非常感谢任何帮助:-)
您的变量 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;
天终于亮了。
checkAll() 尝试通过使用 dir-paginate 的 __default__currentPage 和 Angular 的行 $index 计算其位置来访问每一行。
当然这是行不通的,因为 dir-paginate 持有的 items[] 集合已经过过滤和排序,所以当 items[] 确实被选中时 (item.isSelected = true) items/rows 生活在不可见的页面上。即 - 我们选择了错误的索引。
一个解决方案由以下组成 -
主复选框
<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-paginate 指令控制标签
<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
//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" class 抓取所有可见行,然后遍历那些从复选框值抓取数据索引并设置适当的 item.isSelected。
$scope.onPageChange 在 dir-Paginate 控制指令中指定,确保在页面更改时清除所有行选择。
开心开心。
我正在使用 Angular 和 dirPagination 指令构建一个 CRUD 数据管理项目,需要有一个 "select all" 复选框来选择所有可见的行/不使用/使用 jQuery.
我从这个开始 - 注意 - 我正在攀登 Angular 学习曲线并且知道 some/all 这可能不是 "the Angular way" 但我也不想开始摆弄(没有双关语)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;
};
按预期工作。 Check/uncheck 一行和 {{item.isSelected}} 值在模型中更新并显示在复选框旁边。
然后我在 dirPagination 重复块的 /outside/ 添加了这个:
<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() 函数中 checking/unchecking 各个行不会反映在每一行的 {{item.isSelected}} 显示中。
使用
明确设置单个项目$scope.items[start + ix].isSelected = checked;
似乎在checkAll函数的范围内设置了那个项目的'isSelected' 属性但是行显示没有改变。
显然我有问题,可能误解了范围问题,但在这一点上我很困惑。
非常感谢任何帮助:-)
您的变量 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;
天终于亮了。
checkAll() 尝试通过使用 dir-paginate 的 __default__currentPage 和 Angular 的行 $index 计算其位置来访问每一行。
当然这是行不通的,因为 dir-paginate 持有的 items[] 集合已经过过滤和排序,所以当 items[] 确实被选中时 (item.isSelected = true) items/rows 生活在不可见的页面上。即 - 我们选择了错误的索引。
一个解决方案由以下组成 -
主复选框
<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-paginate 指令控制标签
<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
//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" class 抓取所有可见行,然后遍历那些从复选框值抓取数据索引并设置适当的 item.isSelected。
$scope.onPageChange 在 dir-Paginate 控制指令中指定,确保在页面更改时清除所有行选择。
开心开心。