


Bagaimanakah Arahan AngularJS Boleh Digunakan untuk Penggayaan CSS Bersyarat?
Dec 18, 2024 pm 09:16 PMPenggayaan CSS Bersyarat dalam AngularJS
AngularJS menyediakan pelbagai arahan untuk menggunakan gaya CSS secara bersyarat atau dinamik. Arahan ini termasuk:
- ng-class: Gunakan apabila gaya CSS dibetulkan.
- ng-style: Gunakan apabila gaya nilai berubah secara dinamik.
- ng-show dan ng-hide: Gunakan untuk menunjukkan atau menyembunyikan elemen dengan mengubah suai CSS.
- ng-if: Gunakan untuk menyemak satu syarat dan mengubah suai DOM.
- ng-switch: Gunakan untuk menyemak berbilang syarat dan mengubah suai DOM.
- ng-dilumpuhkan dan ng-baca sahaja: Gunakan untuk menyekat kelakuan elemen bentuk.
- ng-animate: Gunakan untuk menambah peralihan dan animasi CSS3.
Untuk menggunakan gaya secara bersyarat, Sudut mengikat sifat model kepada elemen UI melalui ng-model. Input pengguna kemudiannya digunakan untuk mengubah suai sifat ini, yang seterusnya mencetuskan arahan yang berkaitan untuk mengemas kini gaya CSS.
Contoh untuk S1: Memadam Item
ng-class ialah sesuai untuk senario ini, di mana gaya CSS ditangkap dalam kelas. Ungkapan kelas-ng boleh menjadi rentetan, tatasusunan atau objek nama kelas yang dipetakan kepada nilai boolean. Untuk item yang ditandai, kelas "pending-delete" boleh digunakan:
<div ng-repeat="item in items" ng-class="{ 'pending-delete': item.checked }"> ... Item display content ... <input type="checkbox" ng-model="item.checked" /> </div>
Contoh untuk S2: Pemperibadian Pengguna
Untuk penggayaan CSS dinamik, gaya ng adalah pilihan yang lebih baik. Ia memerlukan ungkapan yang menilai kepada objek nama gaya CSS yang dipetakan kepada nilai. Contohnya, warna latar belakang pilihan pengguna boleh ditetapkan:
<div class="main-body" ng-style="{ color: myColor }"> ... <input type="text" ng-model="myColor" placeholder="Enter a color name" /> </div>
Atas ialah kandungan terperinci Bagaimanakah Arahan AngularJS Boleh Digunakan untuk Penggayaan CSS Bersyarat?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Artikel Panas

Alat panas Tag

Artikel Panas

Tag artikel panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Menambah bayang -bayang kotak ke blok dan elemen WordPress

Buat borang hubungan JavaScript dengan rangka kerja pintar

Buat editor teks sebaris dengan atribut yang boleh dipertikaikan

Pembaca Skrin Demystifying: Borang & Amalan Terbaik Diakses

Menjadikan Peralihan Svelte Khas pertama anda

Membandingkan 5 Pembina Borang PHP Terbaik (dan 3 skrip percuma)

Muat naik fail dengan multer di node.js dan ekspres
