如何显示过滤后的 ng-repeat 数据的长度 [英] How to display length of filtered ng-repeat data

问题描述

我有一个包含许多对象的数据数组(JSON 格式).可以假设以下内容作为该数组的内容:

var 数据 = [{"name": "吉姆",年龄":25},{"name": "杰瑞",年龄":27}];

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

</div

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

现在，我有另一个位置可以显示当前的人数/正在显示的人数，即 Showing {{data.length}} Persons

我想要做的是，当用户搜索一个人并根据查询过滤显示的数据时，Showing...persons 也会改变当前显示的人的值.但它并没有发生.它始终显示数据中的总人数，而不是过滤后的人数 - 如何获得过滤数据的数量?

解决方案

对于 Angular 1.3+(感谢@Tom)

使用别名表达式(文档:Angular 1.3.0:ngRepeat，向下滚动到 Arguments 部分):

对于 1.3 之前的 Angular

将结果分配给一个新变量(例如 filtered)并访问它:

显示结果数量:

显示 {{filtered.length}} 个人

摆弄一个类似的例子.致谢 Pawel Kozlowski

I have a data array which contains many objects (JSON format). The following can be assumed as the contents of this array:

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

Now, I display these details as:

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

Here, query is modeled to an input field in which the user can restrict the data displayed.

Now, I have another location in which I display the current count of people / person being display, i.e Showing {{data.length}} Persons

What I want to do is that when the user searches for a person and the data displayed is filtered based on the query, the Showing...persons also change the value of people being shown currently. But it is not happening. It always displays the total persons in data rather than the filtered one - how do I get the count of filtered data?

解决方案

For Angular 1.3+ (credits to @Tom)

Use an alias expression (Docs: Angular 1.3.0: ngRepeat, scroll down to the Arguments section):

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

For Angular prior to 1.3

Assign the results to a new variable (e.g. filtered) and access it:

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

Display the number of results:

Showing {{filtered.length}} Persons

Fiddle a similar example. Credits go to Pawel Kozlowski

这篇关于如何显示过滤后的 ng-repeat 数据的长度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！