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 for Controller：

.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属性定义如下，这意味着它总是获得正确的总项数，但分页仍然会在过滤之前使用原始项目数计算所需的页数： / p>

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 +
支持此功能

将滤波器与分页Angularjs相结合

2 个答案: