Vis og skjul funksjonalitet med AngularJS

AngularJS lar oss integrere de forskjellige endringene i brukergrensesnittet med endringene i modellen, med dette kan vi justere elementer som f.eks menyer, lister, lenker osv.., på denne måten oppnår vi en mer interaktiv og dynamisk opplevelse.
En av de mest brukte effektene er å vise og skjule, siden vi på en enkel måte får alternativer i en meny til å vises eller ikke i henhold til brukerens eller modellens handlinger, AngularJS lar oss innlemme det på en enkel måte med direktivene ng-shgow Y ng-skjul.
Hvis applikasjonen vår er kompleks, vil vi sikkert ha elementer som er følsomme for konteksten, det vil si at vi kan bruke et verktøy hvis de riktige betingelsene er oppfylt, eller kanskje vi bør skjule noen menyalternativer når visse betingelser er oppfylt.
ng-show og ng-hideDette takket være AngularJS Det er veldig enkelt å oppnå, for dette vil vi bruke direktivene ng-show Y ng-skjul, som har en omvendt operasjon av hver enkelt, for eksempel ng-show vil vise elementet så lenge tilstanden er sann, hvis det er usant vil det skjule det og ng-skjul det vil skjule elementet så lenge tilstanden er sann ellers vil det vise det.
Så med disse operasjonene er logikken vår den som vil diktere hvilken vi skal bruke i applikasjonene våre, disse direktivene fungerer ved å jobbe med stilene til elementene der de brukes, så hvis vi jobber med egenskapene display: blokk å vise og display: ingen å skjule, da vi ikke ser noe som vi ikke vet eller som er for komplekst til ikke å lære.
I det følgende eksemplet skal vi jobbe med å lage en menyvisning eller ikke hvis vi klikker på et alternativ som styrer det, for dette må vi gjøre følgende:
1- I en fil HTML vi skal inkludere AngularJS og så skal vi generere kontrolleren som vil hjelpe oss i vår oppgave, kontrollerkoden må kontrollere menyhandlingene og ville ha en funksjon eller metode som gjør endringen når vi arbeider med direktivets tilstander, i dette tilfellet vil vi jobbe med ng-show, la oss se den nødvendige koden:

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

2- Deretter må vi forberede HTML-elementene våre slik at vi kan anvende direktivet AngularJS, for dette definerer vi $ omfang av den behandlingsansvarlige, og til slutt bruker vi direktivet ng-show til listen, la oss se:

Endre meny 
 
handling1
handling2
handling3

Med dette bør menyen vår vises eller skjules mens vi klikker på den tilsvarende knappen, la oss se hvordan den ser ut i nettleseren vår i begge delstater. Her kan vi se den opprinnelige tilstanden uten menyelementer:

Så ved å klikke på knappen kan vi se hvordan menyen ser ut, nedenfor er koden som konsollen vår oppdager Javascript å demonstrere driften av AngularJS:

Vi la merke til at i konsollkoden forsvant klassen ng-skjul slik at du kan se menyen riktig.
Med dette fullfører vi denne opplæringen der vi har lært å bruke showet og skjule egenskaper når vi bygger et program AngularJS.Likte og hjalp du denne opplæringen?Du kan belønne forfatteren ved å trykke på denne knappen for å gi ham et positivt poeng