Question

我有以下表格标题设置了orderByField和reverseSort变量：

       <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-repeat：

 <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 library：

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

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

Answer 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中手动排序。

在分页表上排序仅对当前页面进行排序

1 个答案: