Rumah > hujung hadapan web > tutorial css > Bagaimanakah Saya Boleh Mengendalikan Tugasan Kelas Bersyarat dengan Cekap dalam AngularJS ng-class?

Bagaimanakah Saya Boleh Mengendalikan Tugasan Kelas Bersyarat dengan Cekap dalam AngularJS ng-class?

Susan Sarandon
Lepaskan: 2024-12-10 16:29:10
asal
365 orang telah melayarinya

How Can I Efficiently Handle Conditional Class Assignments in AngularJS ng-class?

Mengendalikan Ungkapan Bersyarat dalam AngularJS ngClass

Ungkapan dalam kelas-ng boleh digunakan untuk menentukan tugasan kelas bersyarat, membenarkan kawalan dinamik ke atas elemen kelas berdasarkan penilaian keadaan tertentu. Mari terokai cara untuk mencapai ini.

Tugasan Kelas Bersyarat

Untuk menetapkan kelas berdasarkan ungkapan bersyarat, tinggalkan petikan di sekeliling syarat:

<span ng-class={test: obj.value1 == 'someothervalue'}>test</span>
Salin selepas log masuk

Dalam contoh ini, jika obj.value1 bersamaan dengan 'someothervalue', kelas 'test' akan menjadi digunakan pada . Jika tidak, kelas akan dialih keluar.

Arahan Tersuai

Jika logik bersyarat anda terlalu rumit untuk kelas ng, pertimbangkan untuk menggunakan arahan tersuai. Walau bagaimanapun, adalah penting untuk ambil perhatian bahawa menonton ekspresi secara langsung tidak disokong dalam AngularJS. Sebaliknya, gunakan fungsi yang mengembalikan nilai truthy atau falsey, seperti yang ditunjukkan di bawah:

<span ng-class={test: checkValue1()}>test</span>
Salin selepas log masuk
$scope.checkValue1 = function() {
  return $scope.obj.value === 'somevalue';
}
Salin selepas log masuk

Ungkapan Logik

Selain itu, anda boleh menggunakan operator logik untuk mencipta ungkapan bersyarat yang kompleks. Sebagai contoh, perkara berikut akan menggunakan kelas 'ujian' jika sama ada obj.value1 sama dengan 'someothervalue' atau obj.value2 sama dengan 'somethingelse':

ng-class="{'test': obj.value1 == 'someothervalue' || obj.value2 == 'somethingelse'}"
Salin selepas log masuk

Dengan memahami teknik ini, anda boleh menggunakan ng- dengan berkesan kelas untuk mengurus kelas elemen secara dinamik berdasarkan keadaan yang ditentukan pengguna.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengendalikan Tugasan Kelas Bersyarat dengan Cekap dalam AngularJS ng-class?. 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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan