Mostra e nascondi funzionalità con AngularJS

AngularJS ci consente di integrare le diverse modifiche nell'interfaccia utente con le modifiche nel modello, con questo possiamo regolare elementi come menu, elenchi, collegamenti, ecc.., in questo modo otteniamo un'esperienza più interattiva e dinamica.
Uno degli effetti più utilizzati è mostrare e nascondere, poiché in un modo semplice facciamo apparire o meno le opzioni in un menu in base alle azioni dell'utente o del modello, AngularJS ci permette di recepirlo in modo semplice con le direttive ng-shgow sì ng-nascondi.
Se la nostra applicazione è complessa, avremo sicuramente elementi sensibili al contesto, cioè possiamo usare uno strumento se vengono soddisfatte le condizioni corrette o forse dovremmo nascondere alcune opzioni di menu quando vengono soddisfatte determinate condizioni.
ng-show e ng-hideQuesto grazie a AngularJS È molto facile da raggiungere, per questo useremo le direttive ng-show sì ng-nascondi, che hanno un'operazione inversa di ciascuno, ad esempio ng-show mostrerà l'elemento finché la sua condizione è vera, se è falsa lo nasconderà e ng-nascondi nasconderà l'elemento finché la sua condizione è vera altrimenti lo mostrerà.
Quindi con queste operazioni la nostra logica è quella che detterà quale useremo nelle nostre applicazioni, queste direttive funzionano lavorando con gli stili degli elementi in cui vengono applicate, quindi se lavoriamo con le proprietà blocco di visualizzazione per mostrare e display: nessuno nascondere, poiché non vediamo nulla che non sappiamo o che è troppo complesso per non imparare.
Nell'esempio seguente lavoreremo visualizzando o meno un menu se facciamo clic su un'opzione che lo controlla, per questo dobbiamo fare quanto segue:
1- In un file HTML stiamo per includere AngularJS e quindi genereremo il controller che ci aiuterà nel nostro compito, il codice del controller deve controllare le azioni del menu e avrebbe una funzione o un metodo che apporta la modifica quando si lavora con gli stati della direttiva, in questo caso lo faremo lavorare con ng-show, vediamo il codice necessario:

 funzione ShowHideController ($ scope) {$ scope.menuState = {} $ scope.menuState.show = false; $ scope.cambiarMenu = function () {$ scope.menuState.show =! $ scope.menuState.show; }; } 

2- Quindi dobbiamo preparare i nostri elementi HTML in modo da poter applicare la direttiva AngularJS, per questo definiamo il $ ambito del titolare ed infine applichiamo la direttiva ng-show alla lista, vediamo:

Cambia menu 
 
azione1
azione2
azione3

Con questo, il nostro menu dovrebbe essere mostrato o nascosto mentre clicchiamo sul pulsante corrispondente, vediamo come appare nel nostro browser in entrambi gli stati. Qui possiamo vedere lo stato iniziale senza voci di menu:

Quindi facendo clic sul pulsante possiamo vedere come appare il menu, di seguito è riportato il codice che rileva la nostra console Javascript per dimostrare il funzionamento di AngularJS:

Abbiamo notato che nel codice della console la classe è scomparsa ng-nascondi permettendo così di vedere correttamente il menu.
Con questo finiamo questo tutorial in cui abbiamo imparato a usare le proprietà mostra e nascondi quando creiamo un'applicazione in AngularJS.Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo