Vis og skjul funktionalitet med AngularJS

VinkelJS giver os mulighed for at integrere de forskellige ændringer i brugergrænsefladen med ændringerne i modellen, med dette kan vi justere elementer som f.eks menuer, lister, links osv.., på denne måde opnår vi en mere interaktiv og dynamisk oplevelse.
En af de mest brugte effekter er at vise og skjule, da vi på en enkel måde får valgmuligheder i en menu vist eller ikke i henhold til brugerens eller modellens handlinger, VinkelJS giver os mulighed for at inkorporere det på en enkel måde med direktiverne ng-shgow Y ng-skjul.
Hvis vores applikation er kompleks, vil vi helt sikkert have elementer, der er følsomme over for konteksten, det vil sige, at vi kan bruge et værktøj, hvis de korrekte betingelser er opfyldt, eller måske skal vi skjule nogle menuindstillinger, når visse betingelser er opfyldt.
ng-show og ng-hideDette takket være VinkelJS Det er meget let at opnå, til dette vil vi bruge direktiverne ng-show Y ng-skjul, som har en omvendt betjening af hver enkelt, for eksempel ng-show vil vise elementet, så længe dets tilstand er sand, hvis det er falsk, vil det skjule det og ng-skjul det vil skjule elementet, så længe dets tilstand er sand ellers viser det det.
Så med disse operationer er vores logik den, der vil diktere, hvilken vi vil bruge i vores applikationer, fungerer disse direktiver ved at arbejde med typografierne for de elementer, hvor de anvendes, så hvis vi arbejder med egenskaberne display: blok at vise og display: ingen at skjule, da vi ikke ser noget, som vi ikke kender, eller som er for komplekst til ikke at lære.
I det følgende eksempel skal vi arbejde ved at lave en menuvisning eller ej, hvis vi klikker på en indstilling, der styrer den, for dette skal vi gøre følgende:
1- I en fil HTML vi kommer til at inkludere VinkelJS og så skal vi generere den controller, der hjælper os med vores opgave, controller -koden skal styre menuhandlingerne og ville have en funktion eller metode, der foretager ændringen, når vi arbejder med direktivets tilstande, i dette tilfælde vil vi arbejde med ng-show, lad os se den nødvendige kode:

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

2- Så skal vi forberede vores HTML-elementer, så vi kan anvende direktivet VinkelJS, for dette definerer vi $ omfang af den dataansvarlige og endelig anvender vi direktivet ng-show til listen, lad os se:

Skift menu 
 
handling1
handling2
handling3

Med dette skal vores menu vises eller skjules, når vi klikker på den tilsvarende knap, lad os se, hvordan den ser ud i vores browser i begge stater. Her kan vi se den oprindelige tilstand uden menupunkter:

Derefter ved at klikke på knappen kan vi se, hvordan menuen ser ud, herunder er den kode, som vores konsol registrerer Javascript at demonstrere driften af VinkelJS:

Vi bemærkede, at klassen i konsolkoden forsvandt ng-skjul så du kan se menuen korrekt.
Med dette afslutter vi denne vejledning, hvor vi har lært at bruge showet og skjule egenskaber, når vi bygger en applikation ind VinkelJS.Kan du lide og hjælpe denne vejledning?Du kan belønne forfatteren ved at trykke på denne knap for at give ham et positivt punkt