Угловая - регулировка разбиения на страницы при фильтрации

Question

Я новичок в Угловом, так что легко на меня.

Мой вопрос похож на this one. Я делаю что-то совсем другое, поэтому принятый ответ не работает для меня.

Я использую директиву Pagination Angular UI Bootstrap для разбивки набора данных, и я использую фильтры Angular, чтобы пользователи могли фильтровать данные для любого столбца.

Проблема в том, что когда данные фильтруются, пользователь видит только данные на странице, на которой он сейчас находится.

$scope.applyFilter = function() { 
    var begin = (($scope.currentPage - 1) * $scope.itemsPerPage); 
    var end = begin + $scope.itemsPerPage; 
    $scope.totalItems = $filter('filter')($scope.items).length; 
    $scope.filteredItems = $filter('filter')($scope.items).slice(begin, end); 
}; 

Here's the full Plunker

Например, если вы ключ в состоянии «ГА» в государственном фильтре (текстовое поле под словом «государство»), никакие данные не возвращаются. Однако вы можете выбрать страницу 4 и увидеть одну запись, соответствующую условиям.

Я бы хотел, чтобы страница автоматически настраивалась, отображая только одну страницу результатов с правильной записью, отображаемой пользователю.

Я знаю, что есть другие директивы сетки, которые уже имеют эту функциональность, но я бы предпочел не полностью отказаться от моего текущего подхода.

Answer 1

Вы забыли параметр в ваши фильтры вызова

$scope.applyFilter = function() { 
    var begin = (($scope.currentPage - 1) * $scope.itemsPerPage); 
    var end = begin + $scope.itemsPerPage; 
    $scope.totalItems = $filter('filter')($scope.items, $scope.search).length; 
    $scope.filteredItems = ($filter('filter')($scope.items, $scope.search)).slice(begin, end); 
}; 

Answer 2

Я предлагаю вам писать пользовательские постраничной фильтр

app.filter('paginate', function() { 
    return function(items, currentPage, itemsPerPage) { 
     if (!Array.isArray(items)) { 
      return items; 
     } 

     var sliceStart = (currentPage - 1) * itemsPerPage; 

     return items.slice(sliceStart, sliceStart + itemsPerPage); 
    }; 
}); 

Перемещение фильтрации логик к контроллеру

$scope.applyFilter = function() { 
    var begin = (($scope.currentPage - 1) * $scope.itemsPerPage); 
    var end = begin + $scope.itemsPerPage; 

    $scope.filteredItems = $filter('filter')($scope.items, $scope.search); 
    $scope.filteredItems = $filter('orderBy')($scope.filteredItems, $scope.propertyName, $scope.reverse); 
}; 

И, наконец, обновление ваш HTML в двух местах. Здесь

<tr ng-repeat="item in filteredItems | paginate : currentPage : itemsPerPage"> 

и здесь

<ul uib-pagination total-items="filteredItems.length" ng-model="currentPage" class="pagination-sm" boundary-links="true" force-ellipses="true" items-per-page="5" ></ul> 

Your updated example

Answer 3

Вы можете использовать limitTo фильтр для пагинации в вашей нг-повторе.

например.

<tr ng-repeat="item in items | filter:search:strict | orderBy:propertyName:reverse | limitTo:5:(currentPage-1)*5" > 

Хитрость обновляет количество страниц, чтобы показать в вашем постраничном виджете при изменении фильтра. Вы можете сделать это, назначив фильтрованные элементы переменной до применения фильтра limitTo. например

<tr ng-repeat="item in filteredItems = (items | filter:search:strict | orderBy:propertyName:reverse) | limitTo:5:(currentPage-1)*5" > 

<ul uib-pagination total-items="filteredItems.length" ...></ul> 

При таком подходе нет необходимости $watch ничего или делать фильтрацию в контроллере.

Работа plunkr: http://plnkr.co/edit/8NinIYdRsXDVLCPz5VJN?p=preview