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

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

DDD
Lepaskan: 2024-11-11 05:54:03
asal
571 orang telah melayarinya

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>
Salin selepas log masuk

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>
Salin selepas log masuk

Kemudian, anda boleh memaparkan kiraan item yang ditapis:

Showing {{filtered.length}} Persons
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan