Bagaimanakah Saya Boleh Memohon Kelas CSS Secara Bersyarat pada Elemen dalam AngularJS?

Aplikasi Kelas Bersyarat dengan AngularJS

Dalam AngularJS, anda mungkin menghadapi senario di mana anda perlu menggunakan kelas secara bersyarat pada elemen berdasarkan syarat tertentu. Begini cara anda boleh mencapainya dengan cekap.

Masalah:

Pertimbangkan tatasusunan elemen yang dipaparkan sebagai ul dengan tag li untuk setiap elemen. Anda mempunyai sifat Indeks terpilih pada pengawal dan ingin menambah kelas pada li dengan indeks yang sepadan.

Penyelesaian:

1. Menggunakan ng-class:

AngularJS menyediakan arahan ng-class, yang membolehkan anda menggunakan kelas secara dinamik berdasarkan ungkapan. Untuk menggunakan kelas "dipilih" secara bersyarat pada li dengan Indeks terpilih, anda boleh menggunakan:

<li ng-class="{selected: $index == selectedIndex}">...</li>

2. Menggunakan ng:class:

(Sintaks Pra-v1)

Untuk versi AngularJS sebelum v1, anda boleh menggunakan ng:class dengan ungkapan yang menilai terus kepada nama kelas. Contohnya:

<li ng:class="{true:'selected', false:''}[$index == selectedIndex]">...</li>

Perbandingan Penyelesaian:

Walaupun kedua-dua penyelesaian mencapai hasil yang sama, ia berbeza dalam kefungsian:

• ng-class menerima objek di mana nama harta mewakili nama kelas dan nilai harta menentukan sama ada kelas itu digunakan. Ini membolehkan logik aplikasi kelas yang lebih kompleks.
• ng:class memerlukan ungkapan yang menilai kepada nama kelas tertentu dan kurang fleksibel untuk mengendalikan berbilang kelas secara bersyarat.

Nota Tambahan:

Anda juga boleh menggunakan teknik ini untuk memetakan sifat model ke kelas nama, mengekalkan kelas CSS daripada kod pengawal. Contohnya:

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

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