我有一个包含许多对象（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也改变了当前显示的人的价值。但这没有发生。它总是显示数据中的总人数，而不是过滤后的人数-如何获得过滤后的数据计数？
对于Angular 1.3以上版本（归功于@Tom）
使用别名表达式（文档：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针对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>
该别名表达式将防止多重滤波执行问题。
我希望这会有所帮助。
如果有的话，最简单的方法
<div ng-repeat="person in data | filter: query"></div>
过滤数据长度
<div>{{ (data | filter: query).length }}</div>
ngRepeat在应用过滤器时会创建该数组的副本，因此您不能使用源数组仅引用已过滤的元素。
在您的情况下，最好使用以下$filter服务在控制器内部应用过滤器：
function MainCtrl( $scope, filterFilter ) {
// ...
$scope.filteredData = myNormalData;
$scope.$watch( 'myInputModel', function ( val ) {
$scope.filteredData = filterFilter( myNormalData, val );
});
// ...
}
然后，您可以filteredData在视图中使用该属性。这是工作正常的柱塞：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 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>
这是一个演示小提琴
这是工作示例，请参见柱塞
<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;
});
});
您可以通过2种方法来做到这一点。在模板和Controller中。在模板中，您可以将过滤后的数组设置为另一个变量，然后根据需要使用它。这是操作方法：
<ul>
<li data-ng-repeat="user in usersList = (users | gender:filterGender)" data-ng-bind="user.name"></li>
</ul>
....
<span>{{ usersList.length | number }}</span>
如果需要示例，请参阅AngularJs过滤计数示例/演示
文章标签：angularjs , javascript
版权声明：本文为原创文章，版权归 javascript 所有，欢迎分享本文，转载请保留出处！
文件下载
评论已关闭！