如何显示过滤后的 ng-repeat 数据的长度
我有一个包含许多对象（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
拨弄一个 similar example。学分转到 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 为 AngularJS 1.3 之前的版本提出的解决方案。
Angular 1.3 中的新功能
AngularJS 创建者也注意到了这个问题，并且在版本 1.3 (beta 17) 中他们添加了“别名”表达式，该表达式将在应用过滤器后存储转发器的中间结果，例如
<div ng-repeat="person in data | filter:query as results">
<!-- template ... -->
</div>
<p>Number of visible people: {{results.length}}</p>
别名表达式将防止多个过滤器执行问题。
我希望这会有所帮助。
{{(data|filter:query|filter:query2).length}}
如果你有最简单的方法
<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 属性。这是一个有效的 Plunker：http://plnkr.co/edit/7c1l24rPkuKPOS5o2qtx?p=preview
{{filteredData.length}} 而不是 data.length。我还了解到 myInputModel 是映射到过滤数据的输入查询的模型。 val 将是在输入中输入的文本（基本上是查询），但每次我输入时，它都会改变。但是这里的 filterFilter 是什么？我可能会补充一点，我创建了自己的 customFilter（我可以在其中指定要考虑过滤的对象的哪个键）。
ng-repeat="person in filteredData"，因为没有意义过滤它两次。使用 $filter 服务，您可以通过添加“过滤器”作为后缀来请求特定过滤器，例如：dateFilter、jsonFilter 等。如果您使用自己的自定义过滤器，只需使用该过滤器即可通用 filterFilter。
从 AngularJS 1.3 开始，您可以使用别名：
item in items | filter:x as results
在某处：
<span>Total {{results.length}} result(s).</span>
从 docs：
您还可以提供一个可选的别名表达式，然后在应用过滤器后存储转发器的中间结果。通常，这用于在转发器上的过滤器处于活动状态时呈现特殊消息，但过滤后的结果集为空。例如：项目中的项目 | filter:x as results 将重复项的片段存储为结果，但仅在项已通过过滤器处理之后。
$scope.$watch 应用于此别名结果。 $broadcast别名 results 变量的任何提示？
还需要注意的是，您可以通过对过滤器进行分组来存储多个级别的结果
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>
这是工作示例 See on 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;
});
});
你可以用 2 种方法来做到这一点。在模板和控制器中。在模板中，您可以将过滤后的数组设置为另一个变量，然后根据需要使用它。这是如何做到的：
<ul>
<li data-ng-repeat="user in usersList = (users | gender:filterGender)" data-ng-bind="user.name"></li>
</ul>
....
<span>{{ usersList.length | number }}</span>
如果您需要示例，请参阅 AngularJs filtered count examples/demos
关注公众号
不定期副业成功案例分享
$scope.filtered.length在控制器内部访问它。undefined，可能是因为在记录它时，尚未定义变量。那么如何确保控制器中的代码在定义变量之后运行并且在视图中应用过滤器？$scope.$watch('filtered', function() { console.log('filtered:', $scope.filtered); });person in data | filter:query as filtered | limitTo:5，1.3+ 版本不起作用。所以我不得不使用 1.3 之前的版本：person in filtered = (data | filter: query) | limitTo: 5