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

我改变了一些事情

时：

$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>

使用angularjs中的分页号进行故障过滤/排序

1 个答案: