2013-01-07 22 views
10

Bất cứ ai có thể chỉ cho tôi đúng hướng để tìm ra cách sửa lỗi cách phân trang và trật tựBởi làm việc cùng nhau trong Angular?AngularJS Paging orderBy chỉ ảnh hưởng đến trang được hiển thị

Hiện tại, tôi có thể orderBy và trang kết quả của dữ liệu [], nhưng bộ lọc orderBy chỉ ảnh hưởng đến từng trang riêng lẻ. Ví dụ: nếu tôi sắp xếp theo thứ tự ngược theo ID, trang 1 sẽ liệt kê 10-1 và trang 2 sẽ liệt kê 15-11, ngược với bắt đầu với 15 và chuyển đến 1 ở cuối trang thứ hai .

Tôi có một fiddle cơ bản ở đây http://jsfiddle.net/ZbMsR/

Dưới đây là bộ điều khiển của tôi:

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

Dưới đây là phần có liên quan của Xem tôi

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

Trả lời

38

Nếu bạn có hoàn thành phân trang phía máy khách, sau đó bạn chỉ có thể thay đổi thứ tự bộ lọc:

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

Đó có phải là những gì bạn mong đợi không?

+0

Ha sửa lỗi đơn giản –

+0

đẹp! Đã sắp sửa hunker xuống để viết một tấn mã. Phew! –

+0

Bạn có thể giải thích tại sao thay đổi này hoạt động không? – Anamadeya

Các vấn đề liên quan