如何显示过滤的ng-repeat数据的长度

最新推荐文章于 2026-06-18 12:46:34 发布

翻译最新推荐文章于 2026-06-18 12:46:34 发布 · 327 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://oldbug.net/q/12GU7/How-to-display-length-of-filtered-ng-repeat-data

标签

#javascript #angularjs

本文探讨了在AngularJS中如何正确地显示经过过滤的ng-repeat数据的长度。介绍了使用控制器内的$filter服务来计算过滤后的数据数量的方法，以及在HTML模板中直接进行计算的技巧。此外，还提到了Angular1.3引入的别名表达式，用以解决多次使用过滤数据的问题。

本文翻译自：How to display length of filtered ng-repeat data

I have a data array which contains many objects (JSON format). 我有一个包含许多对象（JSON格式）的数据数组。 The following can be assumed as the contents of this array: 以下可以假设为此数组的内容：

var data = [
  {
    "name": "Jim",
    "age" : 25
  },
  {
    "name": "Jerry",
    "age": 27
  }
];

Now, I display these details as: 现在，我将这些细节显示为：

<div ng-repeat="person in data | filter: query">
</div

Here, query is modeled to an input field in which the user can restrict the data displayed. 这里，查询被建模为输入字段，其中用户可以限制所显示的数据。

Now, I have another location in which I display the current count of people / person being display, ie Showing {{data.length}} Persons 现在，我有另一个位置，我在其中显示当前显示的人/ Showing {{data.length}} Persons ，即Showing {{data.length}} Persons

What I want to do is that when the user searches for a person and the data displayed is filtered based on the query, the Showing...persons also change the value of people being shown currently. 我想要做的是，当用户搜索一个人并且根据查询过滤显示的数据时， Showing...persons也会更改当前Showing...persons的值。 But it is not happening. 但它没有发生。 It always displays the total persons in data rather than the filtered one - how do I get the count of filtered data? 它始终显示数据中的总人数而不是过滤数据 - 如何获取过滤数据的计数？

#1楼

参考：https://stackoom.com/question/12GU7/如何显示过滤的ng-repeat数据的长度

#2楼

ngRepeat creates a copy of the array when it applies a filter, so you can't use the source array to reference only the filtered elements. ngRepeat在应用过滤器时会创建数组的副本，因此您无法使用源数组仅引用过滤后的元素。

In your case, in may be better to apply the filter inside of your controller using the $filter service: 在您的情况下，使用$filter服务在控制器内应用过滤器可能更好：

function MainCtrl( $scope, filterFilter ) {
  // ...

  $scope.filteredData = myNormalData;

  $scope.$watch( 'myInputModel', function ( val ) {
    $scope.filteredData = filterFilter( myNormalData, val );
  });

  // ...
}

And then you use the filteredData property in your view instead. 然后在视图中使用filteredData属性。 Here is a working Plunker: http://plnkr.co/edit/7c1l24rPkuKPOS5o2qtx?p=preview 这是一个有效的Plunker： http ：//plnkr.co/edit/7c1l24rPkuKPOS5o2qtx？p = preview

#3楼

Here is worked example See on Plunker 这是工作示例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;
  });
});

#4楼

For completeness, in addition to previous answers (perform calculation of visible people inside controller) you can also perform that calculations in your HTML template as in the example below. 为了完整性，除了先前的答案（执行控制器内可见人员的计算）之外，您还可以在HTML模板中执行该计算，如下例所示。

Assuming your list of people is in data variable and you filter people using query model, the following code will work for you: 假设您的人员列表是data变量，并且您使用query模型过滤人员，以下代码将适用于您：

<p>Number of visible people: {{(data|filter:query).length}}</p>
<p>Total number of people: {{data.length}}</p>

{{data.length}} - prints total number of people {{data.length}} - 打印总人数
{{(data|filter:query).length}} - prints filtered number of people {{(data|filter:query).length}} - 打印已过滤的人数

Note that this solution works fine if you want to use filtered data only once in a page. 请注意 ，如果您只想在页面中使用过滤数据一次，此解决方案可以正常工作。 However, if you use filtered data more than once eg to present items and to show length of filtered list, I would suggest using alias expression (described below) for AngularJS 1.3+ or the solution proposed by @Wumms for AngularJS version prior to 1.3. 但是，如果您多次使用过滤数据，例如呈现项目并显示已过滤列表的长度，我建议使用AngularJS 1.3+的 别名表达式 （如下所述）或@Wumms为1.3之前的AngularJS版本提出的解决方案。

New Feature in Angular 1.3 Angular 1.3中的新功能

AngularJS creators also noticed that problem and in version 1.3 (beta 17) they added "alias" expression which will store the intermediate results of the repeater after the filters have been applied eg 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>

The alias expression will prevent multiple filter execution issue. 别名表达式将防止多个过滤器执行问题。

I hope that will help. 我希望这会有所帮助。

#5楼

For Angular 1.3+ (credits to @Tom) 适用于Angular 1.3+ （ @Tom积分）

Use an alias expression (Docs: Angular 1.3.0: ngRepeat , scroll down to the Arguments section): 使用别名表达式 （文档： Angular 1.3.0：ngRepeat ，向下滚动到Arguments部分）：

<div ng-repeat="person in data | filter:query as filtered">
</div>

For Angular prior to 1.3 对于1.3之前的Angular

Assign the results to a new variable (eg filtered ) and access it: 将结果分配给新变量（例如，已filtered ）并访问它：

<div ng-repeat="person in filtered = (data | filter: query)">
</div>

Display the number of results: 显示结果数量：

Showing {{filtered.length}} Persons

Fiddle a similar example . 举一个类似的例子。 Credits go to Pawel Kozlowski 积分去Pawel Kozlowski

#6楼

Since AngularJS 1.3 you can use aliases: 从AngularJS 1.3开始，您可以使用别名：

item in items | filter:x as results

and somewhere: 在某个地方：

<span>Total {{results.length}} result(s).</span>

From docs : 来自docs ：

You can also provide an optional alias expression which will then store the intermediate results of the repeater after the filters have been applied. 您还可以提供可选的别名表达式，然后在应用过滤器后存储转发器的中间结果。 Typically this is used to render a special message when a filter is active on the repeater, but the filtered result set is empty. 通常，这用于在转发器上的筛选器处于活动状态时呈现特殊消息，但筛选结果集为空。

For example: item in items | 例如：项目中的项目 filter:x as results will store the fragment of the repeated items as results, but only after the items have been processed through the filter. filter：x as results将重复项的片段存储为结果，但仅在通过过滤器处理了项之后。