Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk Memaparkan Kiraan Data yang Ditapis dalam Angular ng-repeat?

Bagaimana untuk Memaparkan Kiraan Data yang Ditapis dalam Angular ng-repeat?

DDD
DDDasal
2024-11-11 05:54:03526semak imbas

How to Display Filtered Data Count in Angular ng-repeat?

Memaparkan Kiraan Data Ditapis dalam Angular ng-repeat

Apabila menggunakan ng-repeat untuk memaparkan data yang ditapis dalam Angular, ia mungkin mencabar untuk memaparkan kiraan item yang ditapis dengan tepat. Pada mulanya, anda mempunyai tatasusunan data yang mengandungi berbilang objek dan anda menapis data berdasarkan pertanyaan input pengguna. Walau bagaimanapun, kiraan orang yang dipaparkan tetap sama, tanpa mengira penapis.

Untuk menyelesaikan isu ini dan memaparkan kiraan data yang ditapis, Angular menyediakan dua pendekatan:

Kaedah 1 (Angular 1.3 ): Alias ​​Expression

Untuk versi Angular 1.3 dan ke atas, anda boleh menggunakan ungkapan alias untuk mencipta pembolehubah baharu yang merujuk kepada data yang ditapis. Ungkapan alias ini membolehkan anda mengakses terus panjang item yang ditapis:

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

Kaedah 2 (Angular Pra-1.3): Pembolehubah Tugasan

Dalam versi terdahulu daripada Angular, anda boleh menetapkan keputusan ng-repeat yang ditapis kepada pembolehubah baharu, seperti jadi:

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

Kemudian, anda boleh memaparkan kiraan item yang ditapis:

Showing {{filtered.length}} Persons

Dengan menggunakan mana-mana kaedah, anda boleh mengemas kini kiraan orang yang dipaparkan secara dinamik semasa pengguna menapis data, memberikan perwakilan yang lebih tepat bagi hasil yang ditapis.

Atas ialah kandungan terperinci Bagaimana untuk Memaparkan Kiraan Data yang Ditapis dalam Angular ng-repeat?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn