Bagaimanakah Saya Boleh Memohon Kelas Secara Bersyarat dalam AngularJS?

Penyelesaian Elegan untuk Mengaplikasikan Kelas Secara Bersyarat dalam AngularJS

Apabila memaparkan tatasusunan elemen, anda mungkin menghadapi keperluan untuk menyerlahkan elemen tertentu berdasarkan pada sesuatu harta. Dalam AngularJS, aplikasi kelas bersyarat ini boleh dicapai dalam beberapa cara.

Satu penyelesaian mudah, walaupun tidak ideal, adalah dengan menduplikasi elemen senarai (li) secara manual dan menambah kelas kepada yang sepadan dengan yang dipilih indeks. Walau bagaimanapun, AngularJS menyediakan kaedah yang lebih canggih untuk mencapai tugas ini.

Penugasan Kelas Berasaskan Ungkapan

Untuk menambah kelas secara langsung pada li dengan indeksIndex terpilih, anda boleh gunakan ungkapan bersyarat dalam arahan kelas-ng:

ng:class="{true:'selected', false:''}[$index==selectedIndex]"

Ungkapan ini menilai sama ada 'dipilih' jika indeks semasa sepadan denganIndex yang dipilih, atau rentetan kosong sebaliknya.

Pemetaan Kelas Berasaskan Objek

Sintaks yang lebih baharu membolehkan anda menetapkan kelas berdasarkan ungkapan yang mengembalikan objek:

ng-class="{selected: $index==selectedIndex}"

Dalam kes ini, sifat 'dipilih' akan digunakan sebagai kelas jika nilai semasa indeks sepadan dengan Indeks yang dipilih.

Pemetaan Nama Harta kepada Kelas

Untuk pendekatan yang lebih fleksibel, anda boleh memetakan sifat model terus kepada nama kelas:

ng-class="{admin:'enabled', moderator:'disabled', '':'hidden'}[user.role]"

Ungkapan ini menggunakan sifat user.role untuk menentukan kelas yang hendak digunakan. Contohnya, jika peranan pengguna ialah 'pentadbir', kelas 'didayakan' akan ditambahkan pada elemen.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memohon Kelas Secara Bersyarat dalam AngularJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!