Clase și stiluri în AngularJS

Modul în care putem lucra aplicațiile noastre și interfața sa de utilizator pot implica schimbări în stiluri, aceste schimbări se reflectă în cea mai mare parte în cele mai moderne aplicații cu modificări în lecții CSS a elementelor, cu aceasta putem reuși să plasăm culorile, să schimbăm aranjamentul etc., elementele noastre HTML.
AngularJS ne permite să facem aceste modificări dinamic atunci când modelul se schimbă, astfel încât să putem lega cum arată aplicația în ansamblu de funcționarea sa, pentru aceasta avem două moduri, una folosind interpolare și a doua cu directiva ng-class.
În acest caz, să ne imaginăm că avem un Clasa CSS, dacă dorim să-l aplicăm elementului nostru la un anumit moment sau acțiune, putem folosi notația de interpolare a Unghiular {{}} astfel încât să puteți aplica modificarea cu o funcție care rulează pe $ scop controlor.
De exemplu, avem o clasă care arată un element în gri pentru a arăta că nu este activ:

 .menu-disabled-true {culoare: gri; } 

Dacă dorim să-l aplicăm aplicației noastre, știm că putem face ca elementul nostru să ia starea directivelor sale pe măsură ce observăm:

Dezactivați

Acum facem conținutul nostru Javascript, aici vom schimba proprietatea este dezactivat de fiecare dată când facem clic pe elementul nostru:

 funcție MenuController ($ scope) {$ scope.isDisabled = false; $ scop. disable = function () {$ scope.isDisabled = 'true'; }; } 

Acum vedem cum arată la pornirea aplicației:

Și acum când faceți clic pe dezactivați:

Am putut observa cum a avut loc schimbarea Clasa CSS într-un mod simplu și că controlerul se ocupa de toate.
O altă modalitate de a aplica modificări de stil este cu directiva ng-class, acest lucru ne permite ceva mai multă flexibilitate, deoarece putem profita de modul în care funcționează AngularJS astfel putem reuși să evaluăm condițiile și în funcție de îndeplinirea lor putem arăta o clasă sau alta.
Să vedem în exemplul următor că dorim să avem o clasă de avertizare și o clasă de eroare, cu aceasta putem chiar să afișăm mesaje diferite, astfel încât utilizatorul să poată fi conștient de ceea ce se întâmplă. Avem clasele CSS pe care le vom folosi:

 .error {fundal-culoare: roșu; } .avertizare {fundal-culoare: galben; } 

Acum vom genera HTML, vom folosi în directivă ng-class unele proprietăți eroare: isError Da avertisment: isWarningAceste evaluări sunt cele care ne permit să alegem o clasă sau alta dintre cele pe care le-am definit în CSS.
Apoi avem un {{mesaj}} care va arăta valoarea corespunzătoare pe care o vom plasa în controler:

{{mesaj}}Simulare eroare Simulare avertisment

În cele din urmă, lucrăm în Javascript:

 funcția ClasesController ($ scope) {$ scope.isError = false; $ scope.isWarning = false; $ scope.showError = function () {$ scope.message = 'Aceasta este o eroare!'; $ scope.isError = adevărat; $ scope.isWarning = false; }; $ scope.mostrarWarning = function () {$ scope. message = 'Doar un avertisment.'; $ scope.isWarning = adevărat; $ scope.isError = false; }; } 

Cu aceasta vom obține apoi un rezultat precum următorul în browserul nostru:

MARI

Ne uităm la consolă în imaginea care ne face un ng-obligatoriu cu clasa de avertizare care este cea pe care am definit-o pentru avertismente, dacă facem clic pe Simulare eroare apoi faceți același lucru cu clasa de eroare. Cu aceasta terminăm acest tutorial, am învățat deja să legăm stilurile și clasele CSS cu aplicațiile noastre create în AngularJS.V-a plăcut și ați ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv