javascript AngularJS Paging orderBy 只影响显示的页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14198822/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS Paging orderBy only affects displayed page
提问by Logan W
Can anyone point me in the right direction to figure out a way to fix the way paging and orderBy work together in Angular?
任何人都可以指出我正确的方向来找出一种方法来解决分页和 orderBy 在 Angular 中协同工作的方式吗？
Currently, I can orderBy and page the results of the data[], but the orderBy filter only affects the each page individually.
目前，我可以对 data[] 的结果进行 orderBy 和分页，但 orderBy 过滤器仅单独影响每个页面。
For example, if I sort in reverse order by ID, page 1 will list 10-1, and page 2 will list 15-11, as opposed to starting with 15 and going to 1 by the end of the second page.
例如，如果我按 ID 倒序排序，第 1 页将列出 10-1，第 2 页将列出 15-11，而不是从 15 开始并在第二页结束时转到 1。
I have a basic fiddle here http://jsfiddle.net/ZbMsR/
我在这里有一个基本的小提琴http://jsfiddle.net/ZbMsR/
Here is my controller:
这是我的控制器：
function MyCtrl($scope) {
$scope.currentPage = 0;
$scope.pageSize = 10;
$scope.orderBy = "-appId";
$scope.data = [
{'appId': 1}, {'appId': 2}, {'appId': 3}, {'appId': 4}, {'appId': 5}, {'appId': 6}, {'appId': 7}, {'appId': 8}, {'appId': 9},{'appId': 10}, {'appId': 11}, {'appId': 12}, {'appId': 13}, {'appId': 14}, {'appId': 15}
];
$scope.numberOfPages=function(){
return Math.ceil($scope.data.length/$scope.pageSize);
};
}
//We already have a limitTo filter built-in to angular,
//let's make a startFrom filter
app.filter('startFrom', function() {
return function(input, start) {
start = +start; //parse to int
return input.slice(start);
}
});
Here is the relevant portion of my View
这是我的观点的相关部分
<strong>Sort By:</strong> <a ng-click="orderBy = 'appId'; reverse=!reverse">Newest</a>
<ul>
<li ng-repeat="item in data | startFrom:currentPage*pageSize | limitTo:pageSize | orderBy:orderBy:reverse">
{{item.appId}}
</li>
</ul>
回答by Valentyn Shybanov
If you have complete client-side paging, then you can just change order of filters:
如果您有完整的客户端分页，那么您可以更改过滤器的顺序：
<li ng-repeat="item in data | orderBy:orderBy:reverse | startFrom:currentPage*pageSize | limitTo:pageSize ">
Is that what you expected?
这是你的预期吗？
