angularjs - 使用带有分页功能的 Angular 过滤器

Question

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

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

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

这工作正常并完美过滤项目。出现问题是因为我将 displayItems 与 uib-pagination 元素一起使用。分页使用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 中。

即。当用户键入时，在 Controller 中，过滤器将应用于totalItems，并且我创建分页所需的filteredItems。然后我还从filteredItems 创建displayItems。我该如何将其放入 Controller 而不是 ng-repeat 的 HTML 中？

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

我添加了一个 plunker 来展示它(而不是)在其所有荣耀中工作...... 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