使用带分页的 Angular 过滤器 [英] Using Angular filter with pagination

问题描述

我在这样的 ng-repeat 中对一组项目使用过滤器:

I am using a filter on an array of items in a ng-repeat like this:

<input type="text" ng-model="filterText">

<li ng-repeat="item in displayItems | filter : {item_name: filterText}>

这很好用并且可以完美地过滤项目.出现问题是因为我使用带有 uib-pagination 元素的 displayItems.分页使用 totalItems 而不是 displayItems.

This works fine and filters the items perfectly.The problem arises because I am using displayItems with a uib-pagination element. The pagination uses totalItems instead of displayItems.

<uib-pagination class="pagination-sm pagination"
    total-items="totalItems.length" ng-model="page" ng-change="changeItems()">
</uib-pagination>

显然我需要以某种方式对总项应用过滤器，然后创建显示项，并将过滤项放在 uib 分页中.

Obviously I need to somehow apply the filter on the total-items, then create the displayItems, and put the filteredItems in the uib-pagination.

即.当人员键入时，在控制器中，过滤器应用于 totalItems，然后我创建分页所需的过滤项.然后我还从filteredItems 创建displayItems.我如何将其放入控制器而不是 ng-repeat 的 HTML 中?

Ie. When the person types, in the controller the filter is applied to the totalItems, and I create the filteredItems needed for the pagination. I also then create the displayItems from the filteredItems. How do I go about putting this into the controller and not in the HTML for the ng-repeat?

我不知道该怎么做.有什么想法吗?非常感谢所有帮助....

I'm not sure how to do this. Any thoughts? All help much appreciated....

我已经包含了一个 plunker 来展示它(不是)在它的所有荣耀中工作......https://plnkr.co/edit/EYX6zO1795sD9TYq2J8U?p=preview

I've included a plunker to show it (not) working in all its glory.... https://plnkr.co/edit/EYX6zO1795sD9TYq2J8U?p=preview

推荐答案

尝试，

HTML，

<li ng-repeat="item in filterData = (totalItems | filter : {itemName: filterText}) | limitTo:3:3*(page-1)">

和

<uib-pagination class="pagination-sm pagination" total-items="filterData.length" ng-model="page"
        ng-change="pageChanged()" previous-text="&lsaquo;" next-text="&rsaquo;" items-per-page=3></uib-pagination>

JavaScript，

JavaScript,

$scope.pageChanged = function() {
  //var startPos = ($scope.page - 1) * 3;
  //$scope.displayItems = $scope.totalItems.slice(startPos, startPos + 3);
};

https://plnkr.co/edit/m3jXsxsCGfqKCJYHsw0u?p=preview

这篇关于使用带分页的 Angular 过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！