Saya pikir ini akan menjadi hal yang sangat umum, tetapi saya tidak dapat menemukan cara menanganinya di AngularJS. Katakanlah saya memiliki daftar acara dan ingin menampilkannya dengan AngularJS, maka itu cukup mudah:
<ul>
<li ng-repeat="event in events">{{event.title}}</li>
</ul>
Tetapi bagaimana saya menangani kasing ketika daftar kosong? Saya ingin memiliki kotak pesan di tempat daftar dengan sesuatu seperti "Tidak ada acara" atau serupa. Satu-satunya hal yang akan mendekati adalah ng-switch
dengan events.length
(bagaimana saya memeriksa jika kosong ketika suatu objek dan bukan array?), Tetapi apakah itu benar-benar satu-satunya pilihan yang saya miliki?
Jawaban:
Anda dapat menggunakan ngShow .
Lihat contoh .
Atau Anda bisa menggunakan ngHide
Lihat contoh .
Untuk objek, Anda dapat menguji Object.keys .
sumber
ng-hide="hasEvents()"
.Dan jika Anda ingin menggunakan ini dengan daftar yang difilter di sini adalah trik yang rapi:
sumber
filteredItems
dan menetapkan nilainya ke(items | filter:keyword)
- dengan kata lain, array dikembalikan oleh filter"face in filteredFaces = faces|filter:{deleted: true} | orderBy:'text'
tapi saya setuju dengan semua orang, ini adalah trik yang luar biasa.Anda mungkin ingin memeriksa petunjuk angular-ui
ui-if
jika Anda hanya ingin menghapusul
dari DOM ketika daftar kosong:sumber
ng-hide
tanpa angular-ui, tetapi itu hanya akan menyembunyikan node, itu tidak akan menghapusnya dari pohon DOM. Denganui-if
arahan angular-ui , itu akan menghapus simpul DOM. Jadi, Anda setidaknya perlu menambahkanui-if
arahan dari kode angular-ui ke kode Anda sendiri.ng-if
termasuk!ng-if
membuat lingkup baru, di manang-hide
tidak. Ini mungkin menyebabkan perilaku yang tidak terduga.Dengan versi angular yang lebih baru, jawaban yang benar untuk pertanyaan ini adalah dengan menggunakan
ng-if
:Solusi ini tidak akan berkedip ketika daftar akan diunduh karena daftar harus ditentukan dan dengan panjang 0 untuk pesan yang akan ditampilkan.
Berikut adalah penyedot untuk menunjukkannya digunakan: http://plnkr.co/edit/in7ha1wTlpuVgamiOblS?p=preview
Kiat: Anda juga dapat menampilkan teks atau pemintal yang memuat:
sumber
Ini mirip dengan @Konrad 'ktoso' Malawski tetapi sedikit lebih mudah diingat.
Diuji dengan Angular 1.4
sumber
ng-if='!filteredItems.length'
item in items | filter: ... | filter: ...
<li ng-if="!filteredItems.length">
item in (filteredItems = (items | filter: someFilter))
Berikut ini pendekatan yang berbeda menggunakan CSS, bukan JavaScript / AngularJS.
CSS:
Markup:
Jika daftar kosong, <li ng-repeat = "item in filteredItems">, dll. Akan dikomentari dan akan menjadi komentar dan bukan elemen li.
sumber
Anda dapat menggunakan ng-switch ini:
sumber
Anda dapat menggunakan
as
kata kunci untuk merujuk koleksi di bawahng-repeat
elemen:sumber
saya biasanya menggunakan ng-show
di mana variabel yang Anda tetapkan misalnya
sumber
Anda dapat menggunakan ng-jika karena ini bukan render di halaman html dan Anda tidak melihat tag html Anda di periksa ...
sumber