Toon en verberg functionaliteit met AngularJS

AngularJS stelt ons in staat om de verschillende wijzigingen in de gebruikersinterface te integreren met de wijzigingen in het model, hiermee kunnen we elementen aanpassen zoals: menu's, lijsten, links, enz.., op deze manier bereiken we een meer interactieve en dynamische ervaring.
Een van de meest gebruikte effecten is tonen en verbergen, aangezien we op een eenvoudige manier opties in een menu laten verschijnen of niet volgens de acties van de gebruiker of het model, AngularJS stelt ons in staat om het op een eenvoudige manier op te nemen in de richtlijnen ng-shgow Y ng-hide.
Als onze applicatie complex is, zullen we zeker elementen hebben die gevoelig zijn voor de context, dat wil zeggen, we kunnen een tool gebruiken als aan de juiste voorwaarden wordt voldaan of misschien moeten we sommige menu-opties verbergen als aan bepaalde voorwaarden wordt voldaan.
ng-show en ng-hideDit dankzij AngularJS Het is heel gemakkelijk te bereiken, hiervoor gebruiken we de richtlijnen ng-show Y ng-hide, die bijvoorbeeld een omgekeerde werking van elk hebben ng-show zal het element tonen zolang de voorwaarde waar is, als het onwaar is, zal het het verbergen en ng-hide het zal het element verbergen zolang de voorwaarde waar is, anders zal het het tonen.
Dus met deze bewerkingen is onze logica degene die bepaalt welke we in onze toepassingen zullen gebruiken, deze richtlijnen werken door te werken met de stijlen van de elementen waar ze worden toegepast, dus als we werken met de eigenschappen weergave: blok laten zien en Geen weergeven te verbergen, omdat we niets zien dat we niet weten of dat te complex is om niet te leren.
In het volgende voorbeeld gaan we werken door wel of niet een menuweergave te maken als we op een optie klikken die deze bestuurt, hiervoor moeten we het volgende doen:
1- In een bestand HTML we gaan opnemen AngularJS en dan gaan we de controller genereren die ons zal helpen bij onze taak, de controllercode moet de menuacties besturen en zou een functie of methode hebben die de verandering aanbrengt bij het werken met de staten van de richtlijn, in dit geval zullen we werk met ng-show, laten we de benodigde code eens bekijken:

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

2- Vervolgens moeten we onze HTML-elementen voorbereiden zodat we de richtlijn kunnen toepassen AngularJS, hiervoor definiëren we de $ bereik van de verwerkingsverantwoordelijke en tot slot passen we de richtlijn toe ng-show naar de lijst, laten we eens kijken:

Menu wijzigen 
 
actie1
actie2
actie3

Hiermee moet ons menu worden weergegeven of verborgen als we op de bijbehorende knop klikken, laten we eens kijken hoe het eruitziet in onze browser in beide staten. Hier kunnen we de beginstatus zien zonder menu-items:

Door vervolgens op de knop te klikken, kunnen we zien hoe het menu verschijnt, hieronder is de code die onze console detecteert Javascript om de werking van te demonstreren AngularJS:

We hebben gemerkt dat in de consolecode de klasse is verdwenen ng-hide zodat u het menu correct kunt zien.
Hiermee sluiten we deze tutorial af waarin we hebben geleerd om de eigenschappen tonen en verbergen te gebruiken wanneer we een applicatie bouwen in AngularJS.Vond je deze Tutorial leuk en heb je eraan geholpen?Je kunt de auteur belonen door op deze knop te drukken om hem een ​​positief punt te geven