将过滤器与分页 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>

此处简化小提琴