javascript - Angular - ngRepeat Order before Filter(分页+排序)

Question

我有一个 ngRepeat ng-repeat="row in rows | orderBy:tableOrdering | filter:currentPage"

• orderBy:tableOrdering 将返回 1 到 1000 之间的整数并以这种方式排序。
• filter:currentPage 将返回 $scope.rows (bool) 中结果的第一页

因为 filter:currentPage 总是从 $scope.rows 返回未排序的元素，因此只有该(已过滤)页面上的结果才会被排序。

有没有办法先运行 OrderBy，以便它对所有行进行排序，然后在排序后按 currentPage 进行过滤？

代码示例:http://plnkr.co/edit/CamEiYIxyW5TaUPgmHxD

Answer 1

使用prototype.some()函数，返回原始项目数组的索引(偏移量)。这会导致一个问题，因为我们需要排序数组的索引。如果我们重构函数以使用与订单函数相关的索引，效果会很好。

HTML

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

JS

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

});

骗子链接:http://plnkr.co/edit/sFvM9Nc65DPCwLy5lofE?p=preview