Question

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

orderBy：tableOrdering 将返回1到1000之间的整数并以这种方式排序。
过滤：currentPage 将返回$ scope.rows（bool）的第一页结果

由于filter:currentPage始终返回$ scope.rows中未排序的元素，因此只会对该（已过滤）页面上的结果进行排序。

有没有办法运行OrderBy FIRST，以便它排序所有行，然后在排序后按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;
    };

});

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

Angular - ng过滤前的重复顺序（分页+排序）

1 个答案: