In questa lezione esaminiamo due direttive che permettono di modificare la costruzione di alcune parti dell'interfaccia utente in base alla verifica di determinate condizioni.
ng-if
La direttiva ng-if consente di visualizzare porzioni dell'interfaccia utente in base ad una condizione booleana, come nel seguente esempio:
<div ng-controller="userController">
<p>Nome: <input type="text" ng-model="utente.nome"></p>
<p>Cognome: <input type="text" ng-model="utente.cognome"></p>
<p ng-if="utente.nome || utente.cognome">{{saluta()}}</p>
</div>Confrontando questo codice HTML con l'esempio visto per ng-show non sembra esserci una sostanziale differenza. Ed in effetti l'effetto visivo è del tutto analogo: il messaggio di saluto viene mostrato quando almeno il nome o il cognome è stato inserito nella casella di testo.
Tuttavia, a differenza di ng-show che si limita a visualizzare o nascondere gli elementi del DOM, ng-if elimina o crea dinamicamente gli elementi del DOM in base alla condizione associata. Questo aspetto deve essere tenuto in considerazione nella scelta della direttiva da utilizzare in modo da bilanciare opportunamente l'occupazione di memoria e l'overhead di creazione ed eliminazione di elementi del DOM.
ng-switch
La direttiva ng-switch seleziona la porzione di interfaccia da visualizzare in base al confronto tra una espressione di controllo ed un elenco di possibili valori, come mostrato nel seguente esempio:
<p>Colore: <input type="text" ng-model="colore"></p>
<div ng-switch="colore">
<span ng-switch-when="rosso" style="color:red">{{colore}}</span>
<span ng-switch-when="verde" style="color:green">{{colore}}</span>
<span ng-switch-when="blu" style="color:blue">{{colore}}</span>
<span ng-switch-default style="color:black">{{colore}}</span>
</div>Il codice definisce una casella di testo in cui è possibile inserire il nome di un colore. In base al valore inserito dall'utente, il nome del colore viene visualizzato nel colore indicato, se questo è rosso, verde o blu, altrimenti viene visualizzato in nero.
Come possiamo vedere, l'espressione di controllo in base alla quale ng-switch seleziona l'output da mostrare coincide con il modello della casella di testo. Gli attributi ng-switch-when consentono di associare ad un valore della variabile colore il relativo codice HTML da mostrare, mentre l'attributo ng-switch-default definisce il codice HTML da considerare quando non viene trovata una corrispondenza con i valori previsti.
In pratica la direttiva ng-switch funziona in modo analogo all'istruzione switch di JavaScript o di costrutti equivalenti in altri linguaggi di programmazione.
Come avviene per ng-if, anche ng-switch non si limita a visualizzare porzioni del DOM, ma si occupa di creare o rimuovere dinamicamente elementi dalla struttura della pagina.