Cara menampilkan panjang data yang diulang-ulang yang difilter

Saya memiliki array data yang berisi banyak objek (format JSON). Berikut ini dapat diasumsikan sebagai isi dari array ini:

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

Sekarang, saya menampilkan detail ini sebagai:

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

Di sini, kueri dimodelkan ke bidang input di mana pengguna dapat membatasi data yang ditampilkan.

Sekarang, saya memiliki lokasi lain di mana saya menampilkan jumlah orang / orang yang sedang ditampilkan, yaitu Showing {{data.length}} Persons

Yang ingin saya lakukan adalah bahwa ketika pengguna mencari seseorang dan data yang ditampilkan difilter berdasarkan permintaan, maka Showing...personsjuga mengubah nilai orang yang ditampilkan saat ini. Tetapi itu tidak terjadi. Itu selalu menampilkan total orang dalam data daripada yang difilter - bagaimana cara saya mendapatkan jumlah data yang difilter?

Untuk Angular 1.3+ (kredit ke @Tom)

Gunakan ekspresi alias (Documents: Angular 1.3.0: ngRepeat , gulir ke bawah ke bagian Argumen ):

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

Untuk Angular sebelum 1.3

Tetapkan hasilnya ke variabel baru (mis. filtered) Dan akses:

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

Tampilkan jumlah hasil:

Showing {{filtered.length}} Persons

Fiddle contoh serupa . Kredit diberikan ke Pawel Kozlowski

Untuk kelengkapan, selain jawaban sebelumnya (melakukan perhitungan orang-orang yang terlihat di dalam controller) Anda juga dapat melakukan perhitungan itu dalam template HTML Anda seperti pada contoh di bawah ini.

Dengan asumsi daftar orang Anda dalam datavariabel dan Anda memfilter orang menggunakan querymodel, kode berikut akan bekerja untuk Anda:

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

• {{data.length}} - mencetak jumlah orang
• {{(data|filter:query).length}} - mencetak jumlah orang yang difilter

Perhatikan bahwa solusi ini berfungsi dengan baik jika Anda ingin menggunakan data yang difilter hanya sekali dalam satu halaman. Namun, jika Anda menggunakan data yang difilter lebih dari sekali misalnya untuk menyajikan item dan menunjukkan panjang daftar yang difilter, saya akan menyarankan menggunakan alias alias (dijelaskan di bawah) untuk AngularJS 1.3+ atau solusi yang diajukan oleh @Wumms untuk versi AngularJS sebelum 1.3.

Fitur Baru dalam Angular 1.3

Pembuat AngularJS juga memperhatikan masalah itu dan dalam versi 1.3 (beta 17) mereka menambahkan ekspresi "alias" yang akan menyimpan hasil antara pengulang setelah filter diterapkan misalnya

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

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

The ekspresi alias akan mencegah masalah eksekusi penyaring beberapa.

Saya harap itu akan membantu.

Cara termudah jika Anda miliki

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

Panjang data yang difilter

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

ngRepeat membuat salinan array ketika menerapkan filter, jadi Anda tidak bisa menggunakan array sumber untuk referensi hanya elemen yang difilter.

Dalam kasus Anda, mungkin lebih baik menerapkan filter di dalam pengontrol Anda menggunakan $filterlayanan:

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

  $scope.filteredData = myNormalData;

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

  // ...
}

Dan kemudian Anda menggunakan filteredDataproperti dalam tampilan Anda. Berikut adalah Plunker yang berfungsi: http://plnkr.co/edit/7c1l24rPkuKPOS5o2qtx?p=preview

Sejak AngularJS 1.3 Anda dapat menggunakan alias:

item in items | filter:x as results

dan di suatu tempat:

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

Dari dokumen :

Anda juga dapat memberikan ekspresi alias opsional yang kemudian akan menyimpan hasil antara repeater setelah filter diterapkan. Biasanya ini digunakan untuk membuat pesan khusus ketika filter aktif pada pengulang, tetapi set hasil yang difilter kosong.

Misalnya: item dalam item | filter: x sebagai hasil akan menyimpan fragmen item yang diulang sebagai hasil, tetapi hanya setelah item diproses melalui filter.

Penting juga untuk dicatat bahwa Anda dapat menyimpan beberapa tingkat hasil dengan mengelompokkan filter

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>

inilah demo biola

Di sini bekerja contoh Lihat di 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;
  });
});

Anda dapat melakukannya dengan 2 cara . Di template dan di Controller . Dalam template Anda dapat mengatur array yang difilter ke variabel lain, lalu menggunakannya seperti yang Anda inginkan. Inilah cara melakukannya:

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

Jika Anda membutuhkan contoh, lihat AngularJs menghitung contoh / demo