首页 文章

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

提问于
浏览
415

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

8 回答

  • 24

    如果你有最简单的方法

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

    过滤的数据长度

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

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

    item in items | filter:x as results
    

    在某个地方:

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

    docs

    您还可以提供可选的别名表达式,然后在应用过滤器后存储转发器的中间结果 . 通常,这用于在转发器上的筛选器处于活动状态时呈现特殊消息,但筛选结果集为空 . 例如:项目中的项目filter:x作为结果将重复项的片段存储为结果,但仅在通过过滤器处理了项之后 .

  • 322

    为了完整性,除了先前的答案(执行控制器内可见人员的计算)之外,您还可以在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}} - 打印已过滤的人数

    Note 如果要在页面中使用过滤数据 only once ,此解决方案可以正常工作 . 但是,如果您多次使用过滤数据,例如要显示项目并显示已过滤列表的长度,我建议使用 alias expression (如下所述)用于AngularJS 1.3+ 或@Wumms为1.3之前的AngularJS版本提出的解决方案 .

    New Feature in 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>
    

    alias expression 将防止多个过滤器执行问题 .

    我希望这会有所帮助 .

  • 34

    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

  • 29

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

    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

  • 32

    你可以用 2 ways 来做 . 在 templateController 中 . 在模板中,您可以将过滤后的数组设置为另一个变量,然后根据需要使用它 . 这是怎么做的:

    <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

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

    For Angular 1.3+ (@Tom积分)

    使用别名表达式(文档:Angular 1.3.0: ngRepeat,向下滚动到“参数”部分):

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

    For Angular prior to 1.3

    将结果分配给新变量(例如 filtered )并访问它:

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

    显示结果数量:

    Showing {{filtered.length}} Persons
    

    小提琴similar example . 积分转至Pawel Kozlowski

相关问题