我有一个包含许多对象(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
也会更改当前显示的人的值 . 但它没有发生 . 它始终显示数据中的总人数而不是过滤数据 - 如何获取过滤数据的计数?
8 回答
如果你有最简单的方法
过滤的数据长度
从AngularJS 1.3开始,您可以使用别名:
在某个地方:
从docs:
为了完整性,除了先前的答案(执行控制器内可见人员的计算)之外,您还可以在HTML模板中执行该计算,如下例所示 .
假设您的人员列表在
data
变量中并且您使用query
模型过滤人员,则以下代码将适用于您:{{data.length}}
- 打印总人数{{(data|filter:query).length}}
- 打印已过滤的人数Note 如果要在页面中使用过滤数据 only once ,此解决方案可以正常工作 . 但是,如果您多次使用过滤数据,例如要显示项目并显示已过滤列表的长度,我建议使用 alias expression (如下所述)用于AngularJS 1.3+ 或@Wumms为1.3之前的AngularJS版本提出的解决方案 .
New Feature in Angular 1.3
AngularJS创建者也注意到了这个问题,并且在版本1.3 (beta 17)中他们添加了"alias"表达式,该表达式将在应用过滤器之后存储转发器的中间结果,例如
alias expression 将防止多个过滤器执行问题 .
我希望这会有所帮助 .
ngRepeat在应用过滤器时会创建数组的副本,因此您无法使用源数组仅引用过滤后的元素 .
在您的情况下,使用$filter服务在控制器内应用过滤器可能更好:
然后在视图中使用
filteredData
属性 . 这是一个有效的Plunker:http://plnkr.co/edit/7c1l24rPkuKPOS5o2qtx?p=preview注意,您可以通过对过滤器进行分组来存储多个级别的结果
这是一个demo fiddle
你可以用 2 ways 来做 . 在 template 和 Controller 中 . 在模板中,您可以将过滤后的数组设置为另一个变量,然后根据需要使用它 . 这是怎么做的:
如果您需要示例,请参阅AngularJs filtered count examples/demos
这是工作的例子See on Plunker
For Angular 1.3+ (@Tom积分)
使用别名表达式(文档:Angular 1.3.0: ngRepeat,向下滚动到“参数”部分):
For Angular prior to 1.3
将结果分配给新变量(例如
filtered
)并访问它:显示结果数量:
小提琴similar example . 积分转至Pawel Kozlowski