如何显示过滤ng的长度

我有一个数据数组,其中包含许多对象(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 {{data.length}} Persons

我想要做的是当用户搜索一个人并且显示的数据根据​​查询过滤时, Showing...persons也会更改当前Showing...persons的价值。 但它没有发生。 它总是显示数据中的总人数而不是过滤后的数据 - 如何获取过滤数据的数量?


对于Angular 1.3+ (信用额度@Tom)

使用别名表达式(Docs: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+的 别名表达式 (如下所述)或由@Wumms为1.3之前的AngularJS版本提出的解决方案。

    Angular 1.3的新特性

    AngularJS的创作者也注意到了这个问题,在版本1.3(测试版17)中,他们添加了“别名”表达式,它将在应用过滤器后存储中继器的中间结果,例如

    <div ng-repeat="person in data | filter:query as results">
        <!-- template ... -->
    </div>
    
    <p>Number of visible people: {{results.length}}</p>
    

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

    我希望这会有所帮助。


    ngRepeat在应用过滤器时创建数组的副本,因此您不能使用源数组仅引用已过滤的元素。

    在你的情况下,使用$filter服务在你的控制器内应用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

    链接地址: http://www.djcxy.com/p/68585.html

    上一篇: How to display length of filtered ng

    下一篇: repeat handle empty list case