2013-01-07 6 views
10

Czy ktoś może wskazać mi właściwy kierunek, aby znaleźć sposób na ustalenie sposobu stronicowania i porządku, aby wspólnie pracować w Angular?Kolejność stronicowania AngularJSTak wpływa tylko na wyświetlaną stronę

Obecnie mogę zamówićBy i wyświetlić wyniki danych [], ale filtr OrderBy wpływa tylko na każdą stronę indywidualnie.

Na przykład, jeśli sortuję w odwrotnej kolejności według identyfikatora, strona 1 wyświetli listę 10-1, a strona 2 wyświetli listę 15-11, zamiast zaczynać od 15 i przechodzić na 1 pod koniec drugiej strony .

Mam podstawowe skrzypce tutaj http://jsfiddle.net/ZbMsR/

Tu jest mój kontroler:

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

Oto odnośny fragment moim zdaniem

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

Odpowiedz

38

Jeśli masz kompletny stronicowania po stronie klienta, następnie można po prostu zmienić kolejność filtrów:

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

Czy tego się spodziewałeś?

+0

Ha, co za prosta naprawa –

+0

piękne! Już miał się schować, żeby napisać tonę kodu. Uff! –

+0

Czy możesz wyjaśnić, dlaczego ta zmiana działa? – Anamadeya

Powiązane problemy