Classi e stili in AngularJS

Il modo in cui possiamo lavorare le nostre applicazioni e la sua interfaccia utente può implicare cambiamenti negli stili, questi cambiamenti si riflettono principalmente nelle applicazioni più moderne con cambiamenti nel Lezioni CSS degli elementi, con questo possiamo riuscire a posizionare i colori, cambiare disposizione, ecc., i nostri elementi HTML.
AngularJS ci consente di apportare queste modifiche dinamicamente quando il modello cambia, quindi possiamo collegare l'aspetto dell'applicazione nel suo insieme al suo funzionamento, per questo abbiamo due modi, uno usando l'interpolazione e il secondo con la direttiva classe ng.
In questo caso, immaginiamo di avere un Classe CSS, se vogliamo applicarlo al nostro elemento in un certo momento o azione possiamo usare la notazione di interpolazione di Angolare {{}} in modo da poter applicare la modifica con una funzione che viene eseguita sul $ ambito controllore.
Ad esempio abbiamo una classe che mostra un elemento in grigio per mostrare che non è attivo:

 .menu-disabled-true {colore: grigio; } 

Se vogliamo applicarlo alla nostra applicazione, sappiamo che possiamo fare in modo che il nostro elemento assuma lo stato delle sue direttive come osserviamo:

Disattivare

Ora facciamo il contenuto del nostro Javascript, qui andiamo a cambiare la proprietà è disabilitato ogni volta che clicchiamo sul nostro elemento:

 funzione MenuController ($ scope) {$ scope.isDisabled = false; $ ambito. disabilita = funzione () {$ scope.isDisabled = 'vero'; }; } 

Ora vediamo come si presenta all'avvio dell'applicazione:

E ora quando fai clic su disattiva:

Abbiamo potuto osservare come c'è stato il cambiamento del Classe CSS in modo semplice e che il controllore ha gestito tutto.
Un altro modo per applicare le modifiche allo stile è con la direttiva classe ng, questo ci consente un po' più di flessibilità poiché possiamo sfruttare il modo in cui funziona AngularJS così possiamo riuscire a valutare le condizioni ea seconda del loro adempimento possiamo mostrare una classe o l'altra.
Vediamo nell'esempio seguente che vogliamo avere una classe di avviso e una classe di errore, con questa possiamo anche mostrare messaggi diversi in modo che l'utente possa essere consapevole di ciò che sta accadendo. Abbiamo le classi CSS che useremo:

 .error {colore di sfondo: rosso; } .warning {colore di sfondo: giallo; } 

Ora andremo a generare il HTML, useremo nella direttiva classe ng alcune proprietà errore: isError sì avviso: isWarningQueste valutazioni sono quelle che ci permettono di scegliere una classe o l'altra di quelle che abbiamo definito nel CSS.
Allora abbiamo un {{Messaggio}} che mostrerà il valore corrispondente che posizioneremo nel controller:

{{Messaggio}}Simula errore Simula avviso

Infine facciamo il lavoro in Javascript:

 function ClassesController ($ scope) {$ scope.isError = false; $ scope.isWarning = false; $ scope.showError = function () {$ scope.message = 'Questo è un errore!'; $ scope.isError = vero; $ scope.isWarning = false; }; $ scope.mostrarWarning = function () {$ scope. message = 'Solo un avvertimento.'; $ scope.isWarning = vero; $ scope.isError = false; }; } 

Con questo otterremo quindi un risultato come il seguente nel nostro browser:

INGRANDIRE

Guardiamo la console nell'immagine che ci fa a ng-binding con la classe di avviso che è quella che abbiamo definito per gli avvisi, se clicchiamo su Simula errore quindi fai lo stesso con la classe di errore. Con questo finiamo questo tutorial, abbiamo già imparato a collegare stili e classi CSS con le nostre applicazioni realizzate in AngularJS.Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo