【问题标题】:AngularJS Paging orderBy only affects displayed pageAngularJS Paging orderBy 只影响显示的页面
【发布时间】:2012-12-21 08:26:40
【问题描述】:

谁能指出我正确的方向,以找出一种方法来修复分页和 orderBy 在 Angular 中协同工作的方式?

目前,我可以 orderBy 并对 data[] 的结果进行分页,但 orderBy 过滤器仅单独影响每个页面。

例如,如果我按 ID 以相反的顺序排序,第 1 页将列出 10-1,第 2 页将列出 15-11,而不是从 15 开始,到第二页末尾到 1。

我在这里有一个基本的小提琴http://jsfiddle.net/ZbMsR/

这是我的控制器:

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);
    }
});

这是我的观点的相关部分

 <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>

【问题讨论】:

    标签: javascript angularjs paging angularjs-orderby


    【解决方案1】:

    如果您有完整的客户端分页,那么您只需更改过滤器的顺序:

    <li ng-repeat="item in data | orderBy:orderBy:reverse | startFrom:currentPage*pageSize | limitTo:pageSize ">
    

    这是你的预期吗?

    【讨论】:

    • 漂亮!正要蹲下来写一大堆代码。呸!
    • @Anamadeya;它很可能按照遇到每个单独命令的顺序工作。所以它由pageSize限制,然后它通过排序函数排序。通过反转它们,它按排序函数排序,然后限制为 pageSize。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-12-29
    • 1970-01-01
    • 1970-01-01
    • 2011-11-28
    • 2013-09-27
    • 2013-02-10
    相关资源
    最近更新 更多