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

IT技术 javascript angularjs
2021-01-22 04:00:03

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

6个回答

对于 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

摆弄一个类似的例子致谢Pawel Kozlowski

如果我想添加 limitTo : 1.3+ 版本不起作用person in data | filter:query as filtered | limitTo:5所以我不得不使用 1.3 之前的版本:person in filtered = (data | filter: query) | limitTo: 5
2021-03-13 04:00:03
@Ben:我想这已经跑题了。我会考虑创建一个自定义过滤器,例如jsfiddle,但是,您也可以在控制器内观看它:$scope.$watch('filtered', function() { console.log('filtered:', $scope.filtered); });
2021-03-19 04:00:03
那对我不起作用。Logs undefined,可能是因为在记录它时,变量尚未定义。那么如何确保在定义变量并在视图中应用过滤器运行控制器中的代码
2021-03-26 04:00:03
@本:是的。您可以使用$scope.filtered.length.
2021-04-01 04:00:03
这是不重复过滤器执行的简单答案。
2021-04-07 04:00:03

为了完整起见,除了前面的答案(在控制器内执行可见人员的计算)之外,您还可以在 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为 1.3 之前的 AngularJS 版本提出的解决方案

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>

别名表达式将防止多重滤波执行问题。

我希望这会有所帮助。

在决定使用这个答案之前,请确保您阅读了@Wumms 的答案(而您不会)...
2021-03-14 04:00:03
与当前最佳答案不同,此答案支持多个过滤器表达式。IE){{(data|filter:query|filter:query2).length}}
2021-03-25 04:00:03
是的,它被执行了两次。
2021-03-26 04:00:03
这是否意味着过滤器被执行两次?
2021-04-03 04:00:03
没关系,当您发表评论时,我看到答案中没有包含有关别名表达式的部分。
2021-04-06 04:00:03

如果你有最简单的方法

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

过滤数据长度

<div>{{ (data | filter: query).length }}</div>
这会枚举数据两次吗?
2021-03-22 04:00:03
这对于使用 angular utils dir-paginate 指令的任何人都非常有用,因为不支持别名和 pre ng-1.3 替代方案。
2021-03-24 04:00:03

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(其中我可以指定要考虑过滤的对象的哪个键)。
2021-03-11 04:00:03
将多个过滤器应用于一个 ng-repeat 怎么样,假设您有 2 个带有值的下拉列表和一个文本输入字段?
2021-03-20 04:00:03
过滤器只是一个函数,因此您只需将第一个过滤器的输出传递给第二个过滤器。
2021-04-01 04:00:03
那就对了。也只是使用,ng-repeat="person in filteredData"因为没有意义过滤它两次。通过$filter服务,你可以只是“过滤器”,如后面添加它要求一个特定的过滤器:dateFilterjsonFilter等等。如果您正在使用自己的自定义过滤器,只需使用的那一个,而不是通用filterFilter
2021-04-06 04:00:03

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

item in items | filter:x as results

和某处:

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

文档

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

例如:项目中的项目 | filter:x as results 会将重复项的片段存储为结果,但仅在项已通过过滤器处理之后。

我无法申请$scope.$watch此别名结果。任何关于$broadcast别名results变量的提示
2021-04-04 04:00:03