Angular - 过滤时调整分页

Question

我是 Angular 的新手，请放轻松。

我的问题类似于this one。我正在做一些不同的事情，所以接受的答案对我不起作用。

我正在使用 Angular UI Bootstrap 的分页指令对数据集进行分页，并且我正在使用 Angular 过滤器来允许用户过滤数据对于任何列。

问题是过滤数据后，用户只能看到他当前所在页面上的数据。

$scope.applyFilter = function() {
    var begin = (($scope.currentPage - 1) * $scope.itemsPerPage);
    var end = begin + $scope.itemsPerPage;
    $scope.totalItems = $filter('filter')($scope.items).length;
    $scope.filteredItems = $filter('filter')($scope.items).slice(begin, end);
};

Here's the full Plunker

例如，如果您在状态过滤器（单词 "State" 下方的文本框）中键入状态 "GA"，则不会返回任何数据。但是，您可以select第4页，看到符合条件的一条记录。

我希望自动调整分页，只显示一页结果，并向用户显示正确的记录。

我知道还有其他网格指令已经具有此功能，但我不想完全放弃我当前的方法。

Answer 1

您忘记了过滤器调用中的参数

$scope.applyFilter = function() {
    var begin = (($scope.currentPage - 1) * $scope.itemsPerPage);
    var end = begin + $scope.itemsPerPage;
    $scope.totalItems = $filter('filter')($scope.items,  $scope.search).length;
    $scope.filteredItems = ($filter('filter')($scope.items, $scope.search)).slice(begin, end);
};

Answer 2

我建议你写一个自定义分页过滤器

app.filter('paginate', function() {
    return function(items, currentPage, itemsPerPage) {
        if (!Array.isArray(items)) {
            return items;
        }

        var sliceStart = (currentPage - 1) * itemsPerPage;

        return items.slice(sliceStart, sliceStart + itemsPerPage);
    };
});

将过滤逻辑移至控制器

$scope.applyFilter = function() {
    var begin = (($scope.currentPage - 1) * $scope.itemsPerPage);
    var end = begin + $scope.itemsPerPage;

    $scope.filteredItems = $filter('filter')($scope.items, $scope.search);
    $scope.filteredItems = $filter('orderBy')($scope.filteredItems, $scope.propertyName, $scope.reverse);
};

最后在两个地方更新您的 HTML。这里

<tr ng-repeat="item in filteredItems | paginate : currentPage : itemsPerPage">

这里

<ul uib-pagination total-items="filteredItems.length" ng-model="currentPage" class="pagination-sm" boundary-links="true" force-ellipses="true" items-per-page="5" ></ul>

Your updated example

Answer 3

您可以在 ng-repeat 中使用 limitTo 过滤器进行分页。

例如

<tr ng-repeat="item in items | filter:search:strict | orderBy:propertyName:reverse | limitTo:5:(currentPage-1)*5" >

棘手的部分是在过滤器更改时更新要在分页小部件中显示的页数。您可以通过在应用 limitTo 过滤器之前将过滤后的项目分配给变量来执行此操作。例如

<tr ng-repeat="item in filteredItems = (items | filter:search:strict | orderBy:propertyName:reverse) | limitTo:5:(currentPage-1)*5" >

<ul uib-pagination total-items="filteredItems.length" ...></ul>

使用这种方法，无需 $watch 在您的控制器中进行任何操作或进行任何过滤。

工作 plunkr：http://plnkr.co/edit/8NinIYdRsXDVLCPz5VJN?p=preview

Angular - 过滤时调整分页

Angular - Adjust Pagination When Filtered

pagination

angularjs

angular-ui-bootstrap