11

Angular でページングと orderBy が連携する方法を修正する方法を見つけるために、誰かが私を正しい方向に向けることができますか?

現在、data[] の結果を orderBy してページングすることはできますが、orderBy フィルターは各ページに個別に影響するだけです。

たとえば、ID で逆順に並べ替えると、15 から始まって 2 ページ目の終わりまでに 1 になるのではなく、1 ページ目には 10-1 が表示され、2 ページ目には 15-11 が表示されます。

ここに基本的なフィドルがあります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>
4

1 に答える 1

40

完全なクライアント側のページングがある場合は、フィルターの順序を変更できます。

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

それはあなたが期待したものですか？

于 2013-01-07T15:39:54.763 に答える