如何显示过滤后的n -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也会更改当前显示的人的值。但这并没有发生。它总是在数据中显示总人数，而不是过滤后的人数——如何获得过滤后的数据计数?

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+中使用别名表达式(如下所述)，或者在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>

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

如果你有

<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

从AngularJS 1.3开始，你可以使用别名:

item in items | filter:x as results

和地方:

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

From docs:

您还可以提供可选的别名表达式，然后存储中间值应用滤波器后的中继器结果。通常这用于在过滤器处于活动状态时呈现特殊消息重复器，但过滤后的结果集为空。
例如: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>

这里有一个demo

以下是工作示例参见

  <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;
  });
});

有两种方法。在模板和控制器中。在模板中，您可以将筛选数组设置为另一个变量，然后按照您的需要使用它。方法如下:

<ul>
  <li data-ng-repeat="user in usersList = (users | gender:filterGender)" data-ng-bind="user.name"></li>
</ul>
 ....
<span>{{ usersList.length | number }}</span>

如果你需要示例，请参阅AngularJs过滤计数示例/演示

相关内容

最新更新

热门标签：