关于javascript：如何显示过滤的ng-repeat数据的长度


How to display length of filtered ng-repeat data

我有一个包含许多对象的数据数组(JSON格式)。可以将以下内容假定为此数组的内容：

1
2
3
4
5
6
7
8
9
10
var data = [
  {
   "name":"Jim",
   "age" : 25
  },
  {
   "name":"Jerry",
   "age": 27
  }
];

现在，我将这些详细信息显示为：

1
</div

在这里，查询被建模为一个输入字段，用户可以在其中限制显示的数据。

现在，我有另一个显示当前显示人数/人的位置，即Showing {{data.length}} Persons。

我想做的是，当用户搜索一个人，并且根据查询过滤显示的数据时，Showing...persons也会更改当前显示的人的值。但事实并非如此。它总是显示数据中的总人数，而不是筛选后的总人数-如何获取筛选后的数据计数？

对于角1.3+(学分为@tom)

使用别名表达式(docs:angular 1.3.0:ngrepeat，向下滚动到arguments部分)：

1
 

For Angular prior to 1.3

将结果赋给一个新变量(如filtered)并访问它：

1
 

显示结果数：

1
Showing {{filtered.length}} Persons

摆弄一个类似的例子。学分归Pawel Kozlowski

相关讨论

为了完整性，除了前面的答案(对控制器中可见的人执行计算)之外，您还可以在HTML模板中执行该计算，如下面的示例所示。

假设您的人员列表在data变量中，并且您使用query模型筛选人员，那么以下代码将适用于您：

1
2
3
4
5
6
<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版本建议的解决方案。

角度1.3中的新功能

AngularJS的创建者也注意到了这个问题，在1.3版(beta 17)中，他们添加了"alias"表达式，在应用了过滤器之后，它将存储中继器的中间结果，例如

1
2
3
4
5
6
    <!-- template ... -->


<p>
Number of visible people: {{results.length}}
</p>

别名表达式将阻止多个筛选器执行问题。

我希望这会有所帮助。

相关讨论

ngrepeat在应用筛选器时创建数组的副本，因此不能使用源数组仅引用已筛选的元素。

在您的情况下，使用$filter服务在控制器内部应用过滤器可能更好：

1
2
3
4
5
6
7
8
9
10
11
function MainCtrl( $scope, filterFilter ) {
  // ...

  $scope.filteredData = myNormalData;

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

  // ...
}

然后在视图中使用filteredData属性。这是一个工作的突袭者：http://plnkr.co/edit/7c1l24rpkukpos5o2qtx？P=预览

相关讨论

如果你有最简单的方法

1
 

过滤数据长度

1
{{ (data | filter: query).length }}
相关讨论

因为AngularJS 1.3可以使用别名：

1
item in items | filter:x as results

某处：

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

来自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.

相关讨论

还可以注意到，通过对过滤器分组，可以存储多个级别的结果。

1
2
3
4
all items: {{items.length}}
filtered items: {{filteredItems.length}}
limited and filtered items: {{limitedAndFilteredItems.length}}
...

这是演示小提琴

下面是普朗克的例子。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
  <body ng-controller="MainCtrl">
    <input ng-model="search" type="text">
   
    Showing {{data.length}} Persons;
    Filtered {{counted}}
   
<ul>

      <li ng-repeat="person in data | filter:search">
        {{person.name}}
     
</li>

   
</ul>

  </body>

 
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;
  });
});
相关讨论

你可以用两种方法来完成。在模板和控制器中。在模板中，您可以将筛选后的数组设置为另一个变量，然后根据需要使用它。以下是操作方法：

1
2
3
4
5
6
7
8
9
10
<ul>

  <li data-ng-repeat="user in usersList = (users | gender:filterGender)" data-ng-bind="user.name">
</li>


</ul>

 ....
<span>{{ usersList.length | number }}</span>

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