将过滤器与分页角度相结合

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>

简化的小提琴在这里

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+ 中得到支持