Bagaimanakah Arahan AngularJS Boleh Digunakan untuk Penggayaan CSS Bersyarat?

Penggayaan 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!