Prikaži i sakrij funkcionalnost s AngularJS -om

AngularJS omogućuje nam da integriramo različite promjene u korisničkom sučelju s promjenama u modelu, s tim možemo prilagoditi elemente kao što su izbornike, popise, veze itd.., na ovaj način postižemo interaktivnije i dinamičnije iskustvo.
Jedan od najčešće korištenih efekata je prikazivanje i skrivanje, jer na jednostavan način omogućujemo da se opcije u izborniku pojavljuju ili ne prema radnjama korisnika ili modela, AngularJS omogućuje nam da ga na jednostavan način uključimo u direktive ng-shgow Y ng-hide.
Ako je naša aplikacija složena, zasigurno ćemo imati elemente osjetljive na kontekst, odnosno možemo koristiti alat ako su ispunjeni točni uvjeti ili bismo trebali sakriti neke opcije izbornika kada su ispunjeni određeni uvjeti.
ng-show i ng-hideOvo zahvaljujući AngularJS To je vrlo lako postići, za to ćemo se koristiti direktivama ng-show Y ng-hide, koji imaju obrnutu operaciju svake, na primjer ng-show prikazat će element sve dok je njegov uvjet istinit, ako je netočan sakriti će ga i ng-hide skrivat će element sve dok mu je uvjet istinit, u protivnom će ga prikazati.
Dakle, s ovim operacijama naša je logika ona koja će odrediti koju ćemo koristiti u našim aplikacijama, ove direktive rade radeći sa stilovima elemenata na koje se primjenjuju, pa ako radimo sa svojstvima prikaz: blok pokazati i prikaz: nema sakriti, jer ne vidimo ništa što ne znamo ili što je previše složeno da ne bismo naučili.
U sljedećem primjeru radit ćemo tako da napravimo prikaz izbornika ili ne ako kliknemo na opciju koja to kontrolira, za to moramo učiniti sljedeće:
1- U datoteci HTML uključit ćemo AngularJS a zatim ćemo generirati kontroler koji će nam pomoći u našem zadatku, kôd kontrolera mora kontrolirati radnje izbornika i imati funkciju ili metodu koja vrši promjenu pri radu sa stanjima direktive, u ovom slučaju ćemo Raditi sa ng-show, pogledajmo potreban kod:

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

2- Zatim moramo pripremiti naše HTML elemente kako bismo mogli primijeniti direktivu AngularJS, za to definiramo $ opseg upravljača i na kraju primjenjujemo direktivu ng-show na popis, da vidimo:

Promijeni izbornik 
 
radnja1
radnja2
radnja3

Time bi naš izbornik trebao biti prikazan ili skriven dok kliknemo na odgovarajući gumb, da vidimo kako to izgleda u našem pregledniku u oba stanja. Ovdje možemo vidjeti početno stanje bez stavki izbornika:

Zatim klikom na gumb možemo vidjeti kako se pojavljuje izbornik, ispod je kôd koji naša konzola detektira Javascript pokazati rad AngularJS:

Primijetili smo da je u kodu konzole klasa nestala ng-hide čime vam omogućuje da ispravno vidite izbornik.
Ovime završavamo ovaj vodič u kojemu smo naučili koristiti show i sakriti svojstva prilikom izgradnje aplikacije AngularJS.Je li vam se svidio i pomogao ovaj vodič?Autor možete nagraditi pritiskom na ovaj gumb kako biste mu dali pozitivan bod