角 - ngRepeat階濾波器（分頁+順序）

之前，我有一個ngRepeat ng-repeat="row in rows | orderBy:tableOrdering | filter:currentPage"角 - ngRepeat階濾波器（分頁+順序）

排序依據：tableOrdering將返回整數從1到1000的順序對時尚。
過濾器：當前頁將從$ scope.rows返回結果的第一頁（布爾）

因爲filter:currentPage總是返回從scope.rows $，這不是有序的元素，只有結果上該（過濾）頁面將被排序。

是否有一種方法可以運行OrderBy FIRST，這樣它將排序所有行，然後在排序後通過currentPage進行過濾？

代碼示例：http://plnkr.co/edit/CamEiYIxyW5TaUPgmHxD

來源

2014-10-09 michaelcurry

請告訴我這個問題？ http://plnkr.co/edit/cRA0EuiEvUzwaLeO4ptr?p=preview過濾器不重新排列元素並在orderBy之後應用... – 2014-10-09 06:57:14

使用prototype.some()功能，還給項目的原始陣列的指數（偏移）。這會導致問題，因爲我們需要排序數組的索引。如果我們重構函數以使用與順序函數相關的索引，那麼它的效果很好。

HTML

<tr ng-repeat="item in items | orderBy:tableOrdering | filter:currentPage">

var app = angular.module('plunker', []); 

app.controller('MainCtrl', function($scope) { 
    $scope.name = 'StackOverflow'; 
    $scope.items = [ 
     {id : 1, value : 2}, 
     {id : 2, value : 6}, 
     {id : 3, value : 5}, 
     {id : 4, value : 1}, 
     {id : 5, value : 0}, 
     {id : 6, value : 6}, 
     {id : 7, value : 8}, 
     {id : 8, value : 4}, 
     {id : 9, value : 6}, 
     {id : 10, value : 3} 
    ]; 

    $scope.pagination = { 
     limit: 3, // ITems per page 
     current: 0, // Current page (page - 1) 
     asc: true, // Asc Vs Desc 
     index: 0 // Count Variable for ordering/pagination 
    }; 

    $scope.setPage = function(page) { 
     $scope.pagination.current = page; 
    } 

    $scope.tableOrdering = function(item) { 
     $scope.pagination.index = 0; // Resets index for counting 
      if ($scope.pagination.asc) { 
       return parseFloat(item.value); 
      } 
      else { 
       return parseFloat(item.value) * (-1); 
      } 
    }; 

    $scope.currentPage = function(item) { 
     for (var k = 0; k < $scope.items.length; k++) { 
     if (item.id == $scope.items[k].id) { 
      $scope.pagination.index++; 
       if ( ($scope.pagination.limit * $scope.pagination.current)   <= $scope.pagination.index - 1 && 
        ($scope.pagination.limit * ($scope.pagination.current + 1) - 1) >= $scope.pagination.index - 1) { 

       // On page 
       return true; 
      } 
      else { 
       // Not on page 
       return false; 
      } 
     } 
     } 

     // Fallback 
     return false; 
    }; 

});

Plunker鏈接：http://plnkr.co/edit/sFvM9Nc65DPCwLy5lofE?p=preview

來源

2014-10-10 00:24:13 michaelcurry

角 - ngRepeat階濾波器（分頁+順序）

回答

相關問題