将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}>
这可以正常工作并且可以完美过滤项目.出现问题是因为我将displayItems与uib-pagination元素一起使用.分页使用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>
很明显,我需要以某种方式将过滤器应用于总项目,然后创建displayItems,并将滤除的项目放在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.然后,我也从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....
我包括了一个塞子,以证明它(不是)在其所有的荣耀中都能正常工作.... 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="‹" next-text="›" 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屋!