1

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

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

因为filter:currentPage总是从 $scope.rows 返回未排序的元素，所以只会对那个（过滤的）页面上的结果进行排序。

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

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

4

1 回答 1

1

使用该prototype.some()函数，返回原始项目数组的索引（偏移量）。这会导致问题，因为我们需要排序数组的索引。如果我们重组函数以使用与 order 函数相关的索引，它会很好地工作。

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

于 2014-10-10T00:24:13.953 回答