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

Question

我有一个包含许多对象（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 也会改变当前显示的人的值。但它没有发生。它始终显示数据中的总人数而不是过滤后的人数 - 我如何获得过滤数据的计数？

Answer 1

如果有的话，最简单的方法

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

过滤后的数据长度

<div>{{ (data | filter: query).length }}</div>

Answer 2

您可以通过 2 种方式 做到这一点。在 template 和 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 filtered count examples/demos

Answer 3

对于 Angular 1.3+（感谢 @Tom）

使用别名表达式（文档：Angular 1.3.0: ngRepeat，向下滚动到参数部分）：

<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

Answer 4

还需要注意的是，您可以通过对过滤器进行分组来存储多个级别的结果

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>

这是demo fiddle

Answer 5

为了完整起见，除了之前的答案（在控制器内执行可见人物的计算）之外，您还可以在 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+ 或 @Wummsalias expression（如下所述） /em> 用于 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>

别名表达式将防止多个过滤器执行问题。

我希望这会有所帮助。

Answer 6

从 AngularJS 1.3 开始，您可以使用别名：

item in items | filter:x as results

在某处：

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

来自docs：

您还可以提供 可选的别名表达式，然后将存储中间 应用过滤器后转发器的结果。通常 这用于在过滤器处于活动状态时呈现特殊消息 转发器，但过滤后的结果集为空。

例如：item in items | filter:x 作为结果将存储 重复项目的片段作为结果，但仅在项目之后 已通过过滤器处理。

Answer 7

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

Answer 8

这是工作示例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;
  });
});