我有一个数据数组，其中包含许多对象(JSON格式)。以下内容可以假定为该数组的内容:
var data = [
{
"name": "Jim",
"age" : 25
},
{
"name": "Jerry",
"age": 27
}
];
现在，我将这些细节显示为:
<div ng-repeat="person in data | filter: query">
</div
在这里，查询被建模为一个输入字段，用户可以在其中限制显示的数据。
现在，我有了另一个位置，在其中显示正在显示的人员/人员的当前计数，即显示{{data。长度}}人
我想做的是，当用户搜索一个人，并且根据查询过滤显示的数据时，显示…“人”也会改变当前显示的人物的价值。但这并没有发生。它总是显示数据中的总人数，而不是过滤的一个-我如何得到过滤数据的计数?
当ngRepeat应用一个过滤器时，它会创建一个数组的副本，所以你不能使用源数组只引用被过滤的元素。
在你的情况下，在你的控制器中使用$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
这里是工作的例子见普兰克
<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;
});
});
为了完整起见，除了前面的答案(在控制器内执行可见人员的计算)，您还可以在下面的示例中在HTML模板中执行该计算。
假设您的人员列表是在数据变量中，并且您使用查询模型过滤人员，以下代码将为您工作:
<p>Number of visible people: {{(data|filter:query).length}}</p>
<p>Total number of people: {{data.length}}</p>
{{数据。Length}} -打印总人数 {{(数据|过滤器:查询)。Length}} -打印过滤后的人数
注意，如果希望在页面中只使用一次过滤后的数据，则此解决方案可以很好地工作。然而，如果你使用过滤数据不止一次，例如，显示项目和过滤列表的长度，我建议AngularJS 1.3+使用别名表达式(如下所述)，或者AngularJS 1.3之前版本的@Wumms提出的解决方案。
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>
别名表达式将防止多个过滤器执行问题。
我希望这能有所帮助。
对于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
将结果赋值给一个新变量(例如过滤后的)并访问它:
<div ng-repeat="person in filtered = (data | filter: query)">
</div>
显示结果的数量:
Showing {{filtered.length}} Persons
举个类似的例子。感谢帕维尔·科兹洛夫斯基
从AngularJS 1.3开始，你可以使用别名:
item in items | filter:x as results
的地方:
<span>Total {{results.length}} result(s).</span>
从文档:
您还可以提供 可选的别名表达式，它将存储中间 应用滤波器后的中继器结果。通常 这用于在筛选器激活时呈现特殊消息 中继器，但过滤后的结果集为空。 例如:item in items | 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>
有两种方法。在模板和控制器中。在模板中，你可以将你过滤的数组设置为另一个变量，然后像你想要的那样使用它。以下是如何做到这一点:
<ul>
<li data-ng-repeat="user in usersList = (users | gender:filterGender)" data-ng-bind="user.name"></li>
</ul>
....
<span>{{ usersList.length | number }}</span>
如果你需要示例，请参阅AngularJs过滤计数示例/演示
