Cách hiển thị độ dài của dữ liệu lặp lại được lọc

Tôi có một mảng dữ liệu chứa nhiều đối tượng (định dạng JSON). Sau đây có thể được coi là nội dung của mảng này:

var data = [
  {
    "name": "Jim",
    "age" : 25
  },
  {
    "name": "Jerry",
    "age": 27
  }
];

Bây giờ, tôi hiển thị các chi tiết này như:

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

Ở đây, truy vấn được mô hình hóa thành một trường đầu vào trong đó người dùng có thể hạn chế dữ liệu được hiển thị.

Bây giờ, tôi có một vị trí khác trong đó tôi hiển thị số người / người hiện tại đang hiển thị, tức là Showing {{data.length}} Persons

Điều tôi muốn làm là khi người dùng tìm kiếm một người và dữ liệu được hiển thị được lọc dựa trên truy vấn, thì Showing...personscũng thay đổi giá trị của những người đang được hiển thị. Nhưng nó không xảy ra. Nó luôn hiển thị tổng số người trong dữ liệu thay vì người được lọc - làm cách nào để tôi đếm được số lượng dữ liệu được lọc?

Dành cho Angular 1.3+ (tín dụng cho @Tom)

Sử dụng biểu thức bí danh (Tài liệu: Angular 1.3.0: ngRepeat , cuộn xuống phần Đối số ):

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

Đối với Angular trước 1.3

Gán kết quả cho một biến mới (ví dụ filtered) và truy cập vào nó:

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

Hiển thị số lượng kết quả:

Showing {{filtered.length}} Persons

Fiddle một ví dụ tương tự . Tín dụng đi đến Pawel Kozlowski

Để đầy đủ, ngoài các câu trả lời trước (thực hiện tính toán những người có thể nhìn thấy bên trong bộ điều khiển), bạn cũng có thể thực hiện các tính toán đó trong mẫu HTML của mình như trong ví dụ bên dưới.

Giả sử danh sách người của bạn datathay đổi và bạn lọc mọi người bằng querymô hình, đoạn mã sau sẽ hoạt động cho bạn:

<p>Number of visible people: {{(data|filter:query).length}}</p>
<p>Total number of people: {{data.length}}</p>

• {{data.length}} - in tổng số người
• {{(data|filter:query).length}} - số lượng người được lọc

Lưu ý rằng giải pháp này hoạt động tốt nếu bạn muốn sử dụng dữ liệu được lọc chỉ một lần trong một trang. Tuy nhiên, nếu bạn sử dụng dữ liệu được lọc nhiều lần, ví dụ như để trình bày các mục và để hiển thị độ dài của danh sách được lọc, tôi sẽ đề xuất sử dụng biểu thức bí danh (được mô tả bên dưới) cho AngularJS 1.3+ hoặc giải pháp được đề xuất bởi @Wumms cho phiên bản AngularJS trước 1.3.

Tính năng mới trong Angular 1.3

Những người tạo AngularJS cũng nhận thấy rằng có vấn đề và trong phiên bản 1.3 (beta 17) họ đã thêm biểu thức "bí danh" sẽ lưu trữ kết quả trung gian của bộ lặp sau khi các bộ lọc được áp dụng, ví dụ

<div ng-repeat="person in data | filter:query as results">
    <!-- template ... -->
</div>

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

Các biểu hiện alias sẽ ngăn chặn nhiều vấn đề thực hiện bộ lọc.

Tôi hy vọng điều đó sẽ giúp.

Cách dễ nhất nếu bạn có

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

Độ dài dữ liệu được lọc

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

ngRepeat tạo một bản sao của mảng khi nó áp dụng bộ lọc, vì vậy bạn không thể sử dụng mảng nguồn để chỉ tham chiếu các phần tử được lọc.

Trong trường hợp của bạn, có thể tốt hơn để áp dụng bộ lọc bên trong bộ điều khiển của bạn bằng $filterdịch vụ:

function MainCtrl( $scope, filterFilter ) {
  // ...

  $scope.filteredData = myNormalData;

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

  // ...
}

Và sau đó bạn sử dụng filteredDatatài sản trong quan điểm của bạn thay vào đó. Đây là một Plunker hoạt động: http://plnkr.co/edit/7c1l24rPkuKPOS5o2qtx?p=preview

Vì AngularJS 1.3, bạn có thể sử dụng bí danh:

item in items | filter:x as results

và ở đâu đó:

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

Từ tài liệu :

Bạn cũng có thể cung cấp một biểu thức bí danh tùy chọn, sau đó sẽ lưu kết quả trung gian của bộ lặp sau khi các bộ lọc được áp dụng. Thông thường, điều này được sử dụng để hiển thị một thông báo đặc biệt khi bộ lọc được kích hoạt trên bộ lặp, nhưng bộ kết quả được lọc trống.

Ví dụ: mục trong mục | bộ lọc: x vì kết quả sẽ lưu trữ đoạn của các mục lặp lại dưới dạng kết quả, nhưng chỉ sau khi các mục đã được xử lý qua bộ lọc.

Nó cũng hữu ích để lưu ý rằng bạn có thể lưu trữ nhiều cấp độ kết quả bằng cách nhóm các bộ lọc

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>

đây là một fiddle demo

Dưới đây là ví dụ hoạt động Xem trên 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;
  });
});

Bạn có thể làm điều đó với 2 cách . Trong mẫu và trong Bộ điều khiển . Trong mẫu bạn có thể đặt mảng đã lọc của mình thành một biến khác, sau đó sử dụng nó như bạn muốn. Đây là cách làm:

<ul>
  <li data-ng-repeat="user in usersList = (users | gender:filterGender)" data-ng-bind="user.name"></li>
</ul>
 ....
<span>{{ usersList.length | number }}</span>

Nếu bạn cần ví dụ, hãy xem các ví dụ / bản trình diễn được lọc của AngularJs