0

我有如下设置orderByFieldandreverseSort变量的表头：

       <th class='header'> 
<a href="" ng-click="orderByField='success'; reverseSort = !reverseSort">
Successes <span ng-show="orderByField == 'success'"><span ng-show="!reverseSort"
class="glyphicon glyphicon-chevron-up"></span><span ng-show="reverseSort" class="glyphicon glyphicon-chevron-down"></span></span>
     </a>
  </th>

我有一个 ng 重复：

 <tbody>
    <tr ng-repeat="item in items| filter:paginate |orderBy:sorter:reverseSort">
         <td>{{item.name}}</td>
        <td>{{item.failPercentage}}</td>
       <td>{{item.failure}}</td>
      <td>{{item.success}}</td>
  </tr>
</tbody>

我也为此使用该ui.bootstrap 库：

            <uib-pagination total-items="totalItems"
                            ng-model="currentPage"
                            max-size="15" boundary-links="true"
                            items-per-page="numPerPage" class="pagination-sm">
            </uib-pagination>

在我的控制器中，我有一个paginate功能和sorter功能适用于我的ng-repeat

    $scope.paginate = function (value) {
    var begin, end, index;
    begin = ($scope.currentPage - 1) * $scope.numPerPage;
    end = begin + $scope.numPerPage;
    index = $scope.items.indexOf(value);
    return (begin <= index && index < end);
};
$scope.sorter = function (item) {
        return item[$scope.orderByField];
};

我的排序只使用默认排序，但是当我排序时，它对每个页面进行独立排序。我如何将排序应用于相互依赖的所有页面（然后将用户发送到分页的第一页）？

4

1 回答 1

1

您以错误的顺序执行此操作 - 首先您需要排序，然后分页。

item in items| orderBy:sorter:reverseSort | filter:paginate

另请注意，您的 paginate 函数正在执行的Array.slice操作，因此最好制作自己的过滤器：

app.filter('slice', function() {
  return function(arr, pageSize, pageNum) {
    ...
    return arr.slice(begin, end);
  };
});

item in items| orderBy:sorter:reverseSort | slice:numPerPage:currentPage

更深入一点：在大型数组上使用过滤器是不好的做法，因为每当任何范围变量发生变化时，这个过滤器都会启动。如果您有 10k 个元素的数组，可能会受到伤害。所以最好在 ng-click 中手动排序。

于 2016-06-15T23:13:23.677 回答