使用角度过滤器和分页

Question

我正在对ng-repeat中的项目数组使用过滤器,如下所示:

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

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

这工作正常并完美地过滤项目.问题出现是因为我使用带有uib-pagination元素的displayItems.分页使用totalItems而不是displayItems.

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

显然我需要以某种方式将过滤器应用于total-items,然后创建displayItems,并将filteredItems放在uib-pagination中.

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

我不知道该怎么做.有什么想法吗？所有人都非常感谢....

我已经包括了一个用来表明它(不是)工作的所有荣耀.... https://plnkr.co/edit/EYX6zO1795sD9TYq2J8U?p=preview

Answer 1

尝试,

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中,

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

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