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

作者: 无思
发布时间: 2025-02-17 05:07:07 (10天前)
转自：

6 条回复

0#
回复此人
甲基蓝 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 你可以做到的<strong> 2种方式 </强> 。在的<strong> 模板 </强> 并在的<strong> 调节器 </强> 。在模板中，您可以将过滤后的数组设置为另一个变量，然后根据需要使用它。这是怎么做的： </p> <pre> <code> <ul> <li data-ng-repeat="user in usersList = (users | gender:filterGender)" data-ng-bind="user.name"></li> </ul> .... <span>{{ usersList.length | number }}</span> </code> </pre> <P> 如果您需要示例，请参阅 <a href="http://www.w3docs.com/snippets/angularjs/how-to-show-angularjs-filtered-count.html" rel="noreferrer"> AngularJs过滤了计数示例/演示 </A> </p> </DIV>

编辑
1#
回复此人
早岁那知世事艰 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 从AngularJS 1.3开始，您可以使用别名： </p> <pre> <code> item in items | filter:x as results </code> </pre> <P> 在某个地方： </p> <pre> <code> <span>Total {{results.length}} result(s).</span> </code> </pre> <P> 从 <a href="https://code.angularjs.org/1.3.0-beta.17/docs/api/ng/directive/ngRepeat" rel="noreferrer"> 文档 </A> ： </p> <BLOCKQUOTE> <P> 你也可以提供可选的别名表达式，然后存储中间件应用滤波器后转发器的结果。通常这用于在过滤器处于活动状态时呈现特殊消息转发器，但过滤结果集为空。 </p> <P> 例如：项目中的项目filter：x作为结果将存储重复项目的片段作为结果，但仅在项目之后已通过过滤器处理过。 </p> </BLOCKQUOTE> </DIV>

编辑
2#
回复此人
薄情 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 注意，您可以通过对过滤器进行分组来存储多个级别的结果 </p> <pre> <code> 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> </code> </pre> <P> 这是一个 <a href="https://jsfiddle.net/fxzby80p/" rel="noreferrer"> 演示小提琴 </A> </p> </DIV>

编辑
3#
回复此人
大黑骡子王 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 如果你有最简单的方法 </p> <pre> <code> <div ng-repeat="person in data | filter: query"></div> </code> </pre> <P> 过滤的数据长度 </p> <pre> <code> <div>{{ (data | filter: query).length }}</div> </code> </pre> </DIV>

编辑
4#
回复此人
满目山河 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 这是工作的例子 <a href="http://plnkr.co/edit/KFqrq6p0RwVVldF4526S?p=preview" rel="noreferrer"> 请参阅Plunker </A> </p> <pre> <code> <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; }); }); </code> </pre> <P> </p> </DIV>

编辑

登录后才能参与评论