如何在 Angular 中获取过滤后的 ngRepeat 数组的长度？

Posted 2023-03-10

【中文标题】如何在 Angular 中获取过滤后的 ngRepeat 数组的长度？

【英文标题】：How can I get the length of my filtered ngRepeat array in Angular?

【发布时间】：2014-03-27 03:39:10

【问题描述】：

我正在尝试在我的 Angular 应用程序中实现分页。我有 1000 多本书，我希望我的 currentPage / totalPages 变量根据我的 filtered ngRepeat 更新。

这是我当前的 Angular 代码：

function Books($scope, $http, $rootScope)
    $scope.books = [1000+ books];
    $scope.filteredbooks = [];

    $scope.numberOfPages = function()
        return Math.ceil($scope.filteredbooks.length / $scope.pageSize);
    

我的下一个/上一个按钮：

<button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">
     Previous
</button>
currentPage+1/numberOfPages()
<button ng-disabled="currentPage >= data.length/pageSize - 1" 
        ng-click="currentPage=currentPage+1">
     Next
</button>

这是我的 ngRepeat：

<tr ng-repeat="book in (filteredbooks = books | filter: search) | 
               orderBy: 'title' | startFrom: currentPage * pageSize | 
               limitTo: pageSize">
     book.title
</tr>

我的问题是我的ngRepeat 中的filteredbooks 没有设置我的$scope.filteredbooks，所以我的总页面长度没有更新。有没有办法做到这一点？

当搜索词发生更改时，是否有一个事件或指令可以让我将$scope.currentPage 设置为 0？

提前致谢！

编辑：这是带有搜索框的首选示例：http://jsfiddle.net/4LRbN/

【参考方案1】：

你可以使用一个函数来告诉页面从哪里开始。

DEMO

在 Angular 中，您已经有一个内置函数 limitTo，所以我们只是添加了 startFrom 函数，以便它可以跟踪它的位置结果。

(data.length 会给你结果的总数。 (data|filter:searchterm).length 会给你过滤结果的数量。

更新fiddle。

我还建议查看 Angular 的 wiki here 上的示例小提琴。

【讨论】：

这正是我跟随的小提琴。它缺少filtering，当输入新的搜索词时，total-pages 会更新。你知道如何得到过滤后的数组的长度吗？

@Prodikl - 请参阅我添加到小提琴中的numberOfReults() 函数。 jsfiddle.net/2ZzZB/926.

@Prodikl - 问题是所有这些都是“过滤”已经加载到浏览器中的数据。

@Prodikl - 我已经更新了fiddle。使用(data|filter:searchterm).length 就是您要找的。​​span>

@Prodikl - 它不能在 JS 代码中因为它正在过滤页面上已经加载的 所有数据JS代码。

【参考方案2】：

这里有更多示例

Pagination on a list using ng-repeat

或者看看这个

https://***.com/a/19410927/2218635

结果喜欢

见：How to achieve pagination/table layout with Angular.js?

【讨论】：

非常感谢您提供的链接，我正在查看该示例，但很难找到其中的肉和土豆。