将过滤器与分页Angularjs相结合

Question

在保持正确分页的同时组合过滤器时遇到问题。

我正在使用自定义指令和 ng-repeat 循环执行任务。

HTML：

<input type="text" ng-model="searchText" class="form-control search-icon float-right" placeholder="Type to filter">

<select ng-model="clientSearch">
    <option value="">All Clients</option>
    <option value="1">All Client 1</option>
    <option value="2">All Client 2</option>
    <option value="3">All Client 3</option>
</select>

<task-pane ng-repeat="task in filterList | start: (currentPage - 1) * perPage | limitTo: perPage | filter: {client_id : clientSearch || undefined}: true" task-data="task" modal-open="modalOpen(task.id)"></task-pane>

<uib-pagination total-items="filterList.length" items-per-page="20" next-text="Next" previous-text="Previous" ng-model="currentPage" max-size="maxSize" class="pagination-sm" boundary-link-numbers="true"></uib-pagination>

还有我的控制器 JS：

.controller('TasksArchiveController', ['$http', '$scope', '$filter', '$uibModal', function($http, $scope, $filter, $uibModal) {

$http.post('../assets/js/ajax/tasks_ajax_router.php', 'action=getArchive', config = {
    headers: {"Content-Type": "application/x-www-form-urlencoded"}
})

    .then(function successCallBack(response) {

        $scope.tasks = response.data.task_data;

        $scope.perPage = 20;

        $scope.setPage = function (pageNo) {
            $scope.currentPage = pageNo;
        };

        $scope.maxSize = 5;
        $scope.$watch('searchText', function (term) {
            var obj = term;
            $scope.filterList = $filter('filter')($scope.tasks, obj);
            $scope.currentPage = 1;

        });

    }

}, function errorCallBack(response) {
    console.log(response);
})


}])

    .directive('taskPane', function() {
        return {
            restrict: 'E',
            templateUrl: '../../assets/task_archive_pane.html',
            scope: {
                task: '=taskData',
                modalOpen: '&modalOpen'
            }
        };
    })

    .filter('start', function () {
        return function (input, start) {
            if (!input || !input.length) { return; }
            start = +start;
            return input.slice(start);
        };
    })

当我输入 searchFilter 时，filterList.length 会更新，因此分页的 total-items 属性会更新并显示正确的页数，并且一切正常。

但是，使用 clientSearch 过滤器（通过从下拉列表中选择更新模型）过滤器正确，但我需要更新 filterList 长度（大概）以便正确计算分页。

编辑：我已尝试将 uib-pagination 属性定义如下，这意味着它始终获得正确的总项目数，但分页仍使用过滤前的原始项目数计算所需的页数：

total-items="(filterList | filter: {client_id : clientSearch || undefined}: true | filter: {user_id: staffSearch.id || undefined }: true | filter: {department_id : departmentSearch || undefined}: true | filter: {task_type : typeSearch || undefined}: true).length"

任何帮助将不胜感激。

Answer 1

首先，您可能希望在分页过滤器之前执行client_id 过滤器。否则，当您过滤时，您将获得各种小尺寸的页面，因为在每个页面中执行client_id 过滤。此外，当您在下面进行更改以计算过滤结果时，计数​​将是错误的，因为它只会计算一页。所以顺序应该是filter:，start:，limitTo:

其次，您需要将client_id 过滤器的结果存储在一个变量中，比如说filtered，它的长度应该通过total-items 控制分页。

<task-pane ng-repeat="task in filtered = (filterList | filter: {client_id : clientSearch || undefined}: true) | start: (currentPage - 1) * perPage | limitTo: perPage" task-data="task" modal-open="modalOpen(task.id)"></task-pane>

<uib-pagination total-items="filtered.length" items-per-page="20" next-text="Next" previous-text="Previous" ng-model="currentPage" max-size="maxSize" class="pagination-sm" boundary-link-numbers="true"></uib-pagination>

Simplified fiddle here

Answer 2

更好的选择是在过滤集合上使用variable alias，如ng-repeat="item in items | filter1: param | filter: {prop: param1} as filteredItem"，其中as filteredItem 将过滤值存储在filteredItem 范围变量中，您可以在任何地方使用该范围变量。

标记

<task-pane ng-repeat="task in filterList | start: (currentPage - 1) * perPage | limitTo: perPage | filter: {client_id : clientSearch || undefined}: true as filteredList" 
  task-data="task" modal-open="modalOpen(task.id)">
</task-pane>

分页

<uib-pagination total-items="filteredList.length" 
   items-per-page="20" next-text="Next" 
   previous-text="Previous" ng-model="currentPage" 
   max-size="maxSize" class="pagination-sm" 
   boundary-link-numbers="true">
</uib-pagination>

注意：Angular 1.3+ 已支持此功能