如何显示过滤的ng重复数据的长度

javascript angularjs

2022-08-29 23:16:34

我有一个包含许多对象（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

答案 1

对于 Angular 1.3+ （积分到 @Tom）

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

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

对于 1.3 之前的角度

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

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

显示结果数：

Showing {{filtered.length}} Persons

答案 2

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

假设您的人员列表是可变的，并且您使用模型筛选人员，则以下代码将适用于您：dataquery

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

请注意，如果您只想在页面中使用一次筛选的数据，则此解决方案工作正常。但是，如果您多次使用过滤数据，例如显示项目并显示过滤列表的长度，我建议对AngularJS 1.3 +使用别名表达式（如下所述）或@Wumms为1.3之前的AngularJS版本提出的解决方案。

Angular 1.3 中的新功能

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

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

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

别名表达式将防止多个筛选器执行问题。

我希望这会有所帮助。