Afișați și ascundeți funcționalitatea cu AngularJS

AngularJS ne permite să integrăm diferitele modificări din interfața utilizatorului cu modificările din model, cu aceasta putem ajusta elemente precum meniuri, liste, linkuri etc.., în acest fel realizăm o experiență mai interactivă și mai dinamică.
Unul dintre cele mai utilizate efecte este afișarea și ascunderea, deoarece într-un mod simplu facem ca opțiunile dintr-un meniu să apară sau nu în funcție de acțiunile utilizatorului sau ale modelului, AngularJS ne permite să îl încorporăm într-un mod simplu cu directivele ng-shgow Da ng-hide.
Dacă aplicația noastră este complexă, cu siguranță vom avea elemente sensibile la context, adică putem folosi un instrument dacă sunt îndeplinite condițiile corecte sau poate ar trebui să ascundem câteva opțiuni de meniu atunci când sunt îndeplinite anumite condiții.
ng-show și ng-hideAcest lucru datorită AngularJS Este foarte ușor de realizat, pentru aceasta vom folosi directivele ng-show Da ng-hide, care au o operație inversă a fiecăruia, de exemplu ng-show va arăta elementul atâta timp cât starea sa este adevărată, dacă este fals îl va ascunde și ng-hide va ascunde elementul atâta timp cât starea sa este adevărată, altfel îl va arăta.
Deci, cu aceste operații logica noastră este cea care va dicta pe care o vom folosi în aplicațiile noastre, aceste directive funcționează lucrând cu stilurile elementelor în care sunt aplicate, deci dacă lucrăm cu proprietățile afișaj: bloc a arăta și display: none să ne ascundem, deoarece nu vedem nimic din ceea ce nu știm sau care este prea complex pentru a nu învăța.
În exemplul următor vom lucra făcând un meniu sau nu dacă facem clic pe o opțiune care îl controlează, pentru aceasta trebuie să facem următoarele:
1- Într-un fișier HTML vom include AngularJS și apoi vom genera controlerul care ne va ajuta în sarcina noastră, codul controlerului trebuie să controleze acțiunile din meniu și ar avea o funcție sau o metodă care face schimbarea atunci când se lucrează cu stările directivei, în acest caz vom face lucreaza cu ng-show, să vedem codul necesar:

 funcție Arată AscundeController ($ scope) {$ scope.menuState = {} $ scope.menuState.show = false; $ scope.cambiarMenu = function () {$ scope.menuState.show =! $ scope.menuState.show; }; } 

2- Apoi trebuie să ne pregătim elementele HTML astfel încât să putem aplica directiva AngularJS, pentru aceasta definim $ scop controlorului și, în cele din urmă, aplicăm directiva ng-show la listă, să vedem:

Schimbați meniul 
 
acțiune1
acțiune2
acțiune3

Cu aceasta, meniul nostru trebuie afișat sau ascuns în timp ce facem clic pe butonul corespunzător, să vedem cum arată în browserul nostru în ambele state. Aici putem vedea starea inițială fără elemente de meniu:

Apoi, făcând clic pe buton, putem vedea cum apare meniul, mai jos este codul pe care consola noastră îl detectează Javascript pentru a demonstra funcționarea AngularJS:

Am observat că în codul consolei clasa a dispărut ng-hide permițându-vă astfel să vedeți corect meniul.
Cu aceasta terminăm acest tutorial în care am învățat să folosim spectacolul și să ascundem proprietăți atunci când construim o aplicație î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