如何显示过滤后的重复数据的长度
我有一个包含许多对象(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 {{data.length}} Persons
我想要做的是,当用户搜索一个人,并显示的数据基于查询过滤时, Showing...persons
也改变当前Showing...persons
的价值。 但是这并没有发生。 它始终显示数据中的总人数而不是过滤的数据 – 如何获得过滤的数据的数量?
对于Angular 1.3+ (学分到@Tom)
使用别名表达式 (Docs: 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
为了完整起见,除了以前的答案(执行控制器内可视人员的计算),还可以在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 for 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>
别名表达式将防止多个过滤器执行问题。
我希望这会有所帮助。
ngRepeat在应用过滤器时创建数组的副本,因此您不能使用源数组仅引用已过滤的元素。
在你的情况下,使用$filter
服务可能会更好地应用你的控制器内的$filter
:
function MainCtrl( $scope, filterFilter ) { // ... $scope.filteredData = myNormalData; $scope.$watch( 'myInputModel', function ( val ) { $scope.filteredData = filterFilter( myNormalData, val ); }); // ... }
然后,您可以在视图中使用filteredData
属性。 这里是一个工作Plunker: http ://plnkr.co/edit/7c1l24rPkuKPOS5o2qtx?p=preview
从AngularJS 1.3开始,你可以使用别名:
item in items | filter:x as results
和某处:
<span>Total {{results.length}} result(s).</span>
从文档 :
您也可以提供一个可选的别名表达式,然后在应用过滤器后存储中继器的中间结果。 通常,当中继器上的过滤器处于活动状态时,会使用此消息来呈现特殊消息,但过滤的结果集为空。
例如:item中的项目| filter:x作为结果将存储重复项目的片段作为结果,但只有在项目已经通过过滤器处理后。
注意到您可以通过对过滤器进行分组来存储多个级别的结果也很有用
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>
这里是一个演示小提琴
最简单的方法,如果你有
<div ng-repeat="person in data | filter: query"></div>
过滤的数据长度
<div>{{ (data | filter: query).length }}</div>
这里是工作示例请参阅Plunker
<body ng-controller="MainCtrl"> <input ng-model="search" type="text"> <br> Showing {{data.length}} Persons; <br> Filtered {{counted}} <ul> <li ng-repeat="person in data | filter:search"> {{person.name}} </li> </ul> </body> <script> var app = angular.module('angularjs-starter', []) app.controller('MainCtrl', function($scope, $filter) { $scope.data = [ { "name": "Jim", "age" : 21 }, { "name": "Jerry", "age": 26 }, { "name": "Alex", "age" : 25 }, { "name": "Max", "age": 22 } ]; $scope.counted = $scope.data.length; $scope.$watch("search", function(query){ $scope.counted = $filter("filter")($scope.data, query).length; }); });
你可以用两种方法做到这一点。 在模板和控制器中 。 在模板中,你可以将你的过滤数组设置为另一个变量,然后像你想要的那样使用它。 这里是如何做到这一点:
<ul> <li data-ng-repeat="user in usersList = (users | gender:filterGender)" data-ng-bind="user.name"></li> </ul> .... <span>{{ usersList.length | number }}</span>
如果您需要示例,请参阅AngularJs过滤的计数示例/演示