我正在使用@michaelbromley 的 dir-pagination 指令。我想获取指令当前页面上的所有记录。有没有办法做到这一点？
这里是链接：dir-pagination，所以我需要从 100 到 96 的 5 个records 的集合。有什么快速的方法吗？
我尝试了几件事，但没有成功。
【问题讨论】：
标签： angularjs pagination angularjs-ng-repeat dirpagination
我遇到了同样的问题，但这里的答案并没有满足我的需求（或者可能想要）。我决定自己解决它，并决定创建一个过滤器，其唯一目的是在给定目标的给定属性中记录通过它的项目。我想出了这个：
/**
* Author: Eric Ferreira <http://stackoverflow.com/users/2954747/eric-ferreira> ©2015
*
* This filter will sit in the filter sequence, and its sole purpose is to record
* the current contents to the given property on the target object. It is sort of
* like the 'tee' command in *nix cli.
*/
angular.module('app').filter('record', function() {
return function(array, property, target) {
if (target && property) {
target[property] = array;
}
return array;
}
});
然后你在你的分页中使用过滤器（或者任何你想要获取当前数组的地方[想想，在用搜索查询过滤之后，在分页之后，在过滤当前页面之后，等等]），就像这样：
<div dir-paginate="item in items | itemsPerPage:pageSize | record:'currentPage':this">{{item.text}}</div>
您也可以在一个序列中多次使用它：
<div dir-paginate="item in items | filter:searchQuery | record:'filtered':this | itemsPerPage:pageSize | record:'currentPage':this">{{item.text}}</div>
上面会记录当前页面和当前过滤查询产生的所有记录。
这将记录（并在其更改时更新）$scope.currentPage 中的当前页面。上例中的this 是过滤器的目标。它解析为$scope.this，对于大多数意图和目的，它只是$scope。
在您的特定情况下，您将使用此行（在您的模块中添加/要求过滤器之后）代替您的分页：
<li dir-paginate="meal in perman = ( meals | filter:q ) | orderBy: order?'key':'-key' | itemsPerPage: pageSize | record:'currentPage':this">{{ meal.key + ': ' +meal.val }}</li>
我继续并分叉了你的 plunker 以显示它也可以工作：
【讨论】：
target 是否以某种方式被重置？
这是另一种可能的方法，它不需要您复制 dir-paginate 表达式中的逻辑：
对于每个重复的项目，您只需将该项目推送到控制器中的数组中即可。这当然会为您提供该页面的所有项目。
这是一个例子：
<ul>
<li dir-paginate="meal in perman = ( meals | filter:q ) | orderBy: order?'key':'-key' | itemsPerPage: pageSize" current-page="currentPage" ng-init="addMeal(meal)">{{ meal.key + ': ' +meal.val }}</li>
</ul>
然后在控制器中：
$scope.addMeal = function(meal) {
if (meal) {
if ($scope.page.length === $scope.pageSize + 1) {
$scope.page = [];
}
$scope.page.push(meal);
}
}
我没有对它进行昂贵的测试，但一般原则应该有效。我认为这有点 hacky，但作为 Rathish 提供的答案的替代方案，值得了解。
【讨论】：
u，页面将不同步。
是的，我们可以根据数据创建自己的逻辑。
Displaying {{ pageSize * (currentPage-1)+$index+1 }} - {{ pageSize*currentPage }} of {{ perman.length }}
【讨论】：
您可以使用数组切片方法，因为您已经可以访问大数组，知道您所在的页码并知道每页的元素数量。您可以在下面的代码中重用 getPage 函数来实现这一点。
app.js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.currentPage = 1;
$scope.pageSize = 5;
var meals = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
function getPage(currentPage, pageSize, arr, reverse) {
var beginIndex, endIndex, noOfPages;
if(reverse) {
beginIndex = arr.length - currentPage * pageSize;
} else {
beginIndex = currentPage * pageSize - pageSize;
}
endIndex = beginIndex + pageSize;
beginIndex = beginIndex < 0 ? 0 : beginIndex;
return arr.slice(beginIndex, endIndex);
}
//This will return the 5 elements in page 1 of meals array which will be meals 11 to 15 since the array is bound to the pagination directive in the reverse (desc) order
$scope.firstFiveArrRev = getPage($scope.currentPage, $scope.pageSize, meals, true);
//This will return the 5 elements in page 1 of meals array which will be meals 1 to 5 since the array is bound to the pagination directive in ascending order
$scope.firstFiveArr = getPage($scope.currentPage, $scope.pageSize, meals, false);
});
index.html
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.0-rc.0/angular.js" data-semver="1.4.0-rc.0"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
Displaying elements from page number {{currentPage}}
<br />
Page size is set to {{pageSize}}
<br />
When order is Reverse: true
<div>{{ firstFiveArrRev.toString() }}</div>
When order is Reverse: false
<div>{{ firstFiveArr.toString() }}</div>
</body>
</html>
这里是 plnkr
【讨论】：
从这里下载dirPagination.js。
现在将 dirPagination.js 包含到您的页面中。
像这样在你的模块中添加 angularUtils.directives.dirPagination
var app = angular.module("myApp",['angularUtils.directives.dirPagination']);
dir-paginate指令进行分页，在tr标签中添加dir-paginate
<tr dir-paginate="event in events|orderBy:['columnid', 't']:true | itemsPerPage: 5">
<dir-pagination-controls
max-size="5"
direction-links="true"
boundary-links="true" >
</dir-pagination-controls>
【讨论】：