如何显示经过过滤的ng-repeat数据的长度

用户名 · 03月14日

我有一个包含许多对象（JSON格式）的数据数组。以下内容可以假定为该数组的内容：

var data = [
  {
    "name": "Jim",
    "age" : 25
  },
  {
    "name": "Jerry",
    "age": 27
  }
];

现在，我将这些详细信息显示为：

<div ng-repeat="person in data | filter: query">
</div

在这里，查询被建模为一个输入字段，用户可以在其中限制显示的数据。

现在，我在另一个位置显示了当前正在显示的人数。 Showing {{data.length}} Persons

我想做的是，当用户搜索某个人并且根据查询过滤显示的数据时，这Showing...persons也会更改当前显示的人的价值。但这没有发生。它总是显示数据中的总人数，而不是过滤后的人数-如何获得过滤后的数据计数？

JavaScript JavaScript

回答(6)

时间

杰

杰里米·威尔

6楼 · 2020-03-14 18:05:58

注意，可以通过对过滤器进行分组来存储多个级别的结果，这也是很有用的

all items: {{items.length}}
filtered items: {{filteredItems.length}}
limited and filtered items: {{limitedAndFilteredItems.length}}
<div ng-repeat="item in limitedAndFilteredItems = (filteredItems = (items | filter:search) | limitTo:25)">...</div>

这是一个演示小提琴

0人赞回复

戴

戴维·纽康哈扎拉佩·图南扬

5楼 · 2020-03-14 18:05:58

您可以通过2种方法来实现。在模板和Controller中。在模板中，您可以将过滤后的数组设置为另一个变量，然后根据需要使用它。这是操作方法：

<ul>
  <li data-ng-repeat="user in usersList = (users | gender:filterGender)" data-ng-bind="user.name"></li>
</ul>
 ....
<span>{{ usersList.length | number }}</span>

如果需要示例，请参阅AngularJs过滤计数示例/演示

0人赞回复

欢

欢迎来到

4楼 · 2020-03-14 18:05:58

从AngularJS 1.3开始，您可以使用别名：

item in items | filter:x as results

在某处：

<span>Total {{results.length}} result(s).</span>

从文档：

您还可以提供一个可选的别名表达式，该别名表达式将在应用过滤器后存储转发器的中间结果。通常，当转发器上的过滤器处于活动状态但过滤的结果集为空时，此消息用于呈现特殊消息。

例如：item in items | filter：x as results将重复项的片段存储为结果，但仅在通过过滤器处理了这些项之后。

0人赞回复

汤

汤姆

3楼 · 2020-03-14 18:05:57

为了完整起见，除了先前的答案（在控制器内部执行可见人员的计算）之外，您还可以在HTML模板中执行该计算，如下例所示。

假设您的人员列表处于data可变状态，并且使用query模型过滤人员，则以下代码将为您工作：

<p>Number of visible people: {{(data|filter:query).length}}</p>
<p>Total number of people: {{data.length}}</p>

{{data.length}} -打印总人数
{{(data|filter:query).length}} -打印已过滤的人数

请注意，如果您只想在页面中使用一次过滤的数据，则此解决方案效果很好。但是，如果您多次使用过滤后的数据（例如，显示项目和显示过滤后的列表的长度），我建议对AngularJS 1.3+使用别名表达式（如下所述），或者对@Wumms针对1.3之前的AngularJS版本使用解决方案。

Angular 1.3的新功能

AngularJS的创建者也注意到了这个问题，在1.3版（测试版17）中，他们添加了“别名”表达式，该表达式将在应用过滤器后存储转发器的中间结果，例如

<div ng-repeat="person in data | filter:query as results">
    <!-- template ... -->
</div>

<p>Number of visible people: {{results.length}}</p>

该别名表达式将防止多重滤波执行问题。

我希望这会有所帮助。

0人赞回复

唐

唐老鸭离子波

2楼 · 2020-03-14 18:05:57

如果有的话，最简单的方法

<div ng-repeat="person in data | filter: query"></div>

过滤数据长度

<div>{{ (data | filter: query).length }}</div>

0人赞回复

乌

乌姆斯

1楼 · 2020-03-14 18:05:57

对于Angular 1.3以上版本（记入@Tom）

使用别名表达式（文档：Angular 1.3.0：ngRepeat，向下滚动到Arguments部分）：

<div ng-repeat="person in data | filter:query as filtered">
</div>

对于1.3之前的Angular

将结果分配给新变量（例如filtered）并访问它：

<div ng-repeat="person in filtered = (data | filter: query)">
</div>

显示结果数：

Showing {{filtered.length}} Persons

提一个类似的例子。积分归Pawel Kozlowski所有

0人赞回复

你的回答

温馨提示：登录后可发表评论或回复

关闭，朕知道了

如何显示经过过滤的ng-repeat数据的长度

如何显示经过过滤的ng-repeat数据的长度

扫码关注微信公众号或小程序

相关文章

网站

产品

关于

微信公众号