Bagaimanakah Saya Boleh Memohon Kelas Bersyarat dengan Cekap untuk Senarai Item dalam AngularJS?

Amalan Terbaik untuk Aplikasi Kelas Bersyarat dalam AngularJS

Dalam AngularJS, menggunakan kelas secara bersyarat pada elemen boleh dicapai dalam pelbagai cara. Mari kita terokai penyelesaian yang paling optimum berdasarkan senario khusus anda.

Senario: Tatasusunan dipaparkan sebagai senarai tidak tersusun dan anda ingin menambah kelas pada item senarai dengan indeks yang dipilihIndex dikawal oleh sifatIndex terpilih pada pengawal.

Awal Pendekatan:

Anda sedang mereplikasi kod item senarai secara manual dan menambahkan kelas pada salah satu teg item senarai. Semasa kaedah ini berfungsi, ia memperkenalkan penduaan yang tidak perlu.

Penyelesaian 1: Arahan kelas ng dengan Ungkapan Ternilai

Daripada menggunakan nama kelas CSS dalam pengawal, anda boleh gunakan ungkapan untuk menetapkan nama kelas secara dinamik. Begini caranya:

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

Nota: Gunakan sintaks lama dengan kolon kerana mekanisme penilaian yang diperlukan untuk pendekatan ini.

Penyelesaian 2: ng Arahan kelas dengan Objek Bersyarat

AngularJS juga menyokong penugasan objek kepada arahan kelas-ng. Setiap nama sifat mewakili nama kelas dan nilainya menentukan sama ada kelas digunakan.

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

Nota Tambahan:

Walaupun kedua-dua penyelesaian mencapai hasil yang sama, mereka tidak setara dari segi fungsi. Penyelesaian 2 membolehkan anda memetakan sifat model kepada nama kelas dan menyimpannya daripada kod pengawal. Ini memberikan lebih fleksibiliti dan meningkatkan kebolehbacaan kod.

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