在angularjs中使用分页号过滤/排序问题

Question

我在过滤时尝试使分页正常运行时遇到问题。

当过滤器处于活动状态时，分页数不正确，它只过滤结果的第一页。我想要的是：

• 开始考虑的所有项目
• 然后按文本和类别过滤器进行过滤
• 对过滤后的结果进行排序
• 将结果限制为仅显示当前页面
• 更新页码以正确显示基于过滤器的页数，而不是所有结果

这是我正在使用的 ng-repeat 语句：

item in items | 
filter: { name: filters.name, category: filters.category } | 
orderBy: predicate: reverse | 
startFrom: currentPage * pageSize | 
limitTo: pageSize

还有完整的html：

<table class="table table-striped">
        <thead>
            <tr>
                <th><a href="" ng-click="predicate='id';reverse=!reverse">#</a></th>
                <th><a href="" ng-click="predicate='name';reverse=!reverse">Name</a></th>
                <th><a href="" ng-click="predicate='category';reverse=!reverse">Category</a></th>
                <th><a href="" ng-click="predicate='date';reverse=!reverse">Date</a></th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="item in items | filter:{name:filters.name,category:filters.category} | orderBy:predicate:reverse | startFrom:currentPage*pageSize | limitTo:pageSize">
                <td>{{ item.id || 'None' }}</td>
                <td>{{ item.name || 'None' }}</td>
                <td>{{ item.category || 'None' }}</td>
                <td>{{ item.date | None' }}</td>
            </tr>
        </tbody>
    </table>
    <pagination total-items="totalItems" ng-model="currentPage"></pagination>

这是我用来获取结果页面的自定义 startFrom 过滤器：

.filter('startFrom', function () {
    return function (input, start) {
        return input.slice(start);
    };
});

您可以在此处查看工作版本：

http://kmturley.github.io/angular-bootstrap/app/

Answer 1

请看这里：http://plnkr.co/edit/yVDZR6Zwo9P8OHT0G2Hr?p=preview

我改变了一些东西

JS：

$scope.updatefilters = function(category)
          {
       $scope.filters.category = category;
       $scope.totalItems = $filter('filter')($scope.items,$scope.filters).length;
        }

        $scope.setPage = function (num) {
            $scope.totalItems = $filter('filter')($scope.items,$scope.filters).length;
            $scope.currentPage = num;
            $scope.pageSize = 5;
            console.log($scope.currentPage, $scope.totalItems);
        };

        $scope.setPage(1);
    })

html:

<div ui-view="sidebar">
            <div class="filters">
                <h1>Filters</h1>

                <h3>Category</h3>
                <p><a href="" ng-click="updatefilters('')">All Categories</a></p>
                <p><a href="" ng-click="updatefilters('music')">Music</a></p>
                <p><a href="" ng-click="updatefilters('film')">Film</a></p>
                <p><a href="" ng-click="updatefilters('tv')">TV</a></p>
            </div>
        </div>