Visa och dölj funktionalitet med AngularJS

AngularJS låter oss integrera de olika ändringarna i användargränssnittet med förändringarna i modellen, med detta kan vi justera element som t.ex. menyer, listor, länkar etc.., på detta sätt uppnår vi en mer interaktiv och dynamisk upplevelse.
En av de mest använda effekterna är att visa och gömma sig, eftersom vi på ett enkelt sätt får alternativ i en meny att visas eller inte enligt användarens eller modellens handlingar, AngularJS tillåter oss att införliva det på ett enkelt sätt med direktiven ng-shgow Y ng-hide.
Om vår applikation är komplex kommer vi säkert att ha element som är känsliga för sammanhanget, det vill säga att vi kan använda ett verktyg om rätt villkor är uppfyllda eller kanske vi bör dölja några menyalternativ när vissa villkor är uppfyllda.
ng-show och ng-hideDetta tack vare AngularJS Det är väldigt lätt att uppnå, för detta kommer vi att använda direktiven ng-show Y ng-hide, som har en omvänd funktion av var och en, till exempel ng-show kommer att visa elementet så länge dess tillstånd är sant, om det är falskt kommer det att dölja det och ng-hide det kommer att dölja elementet så länge dess tillstånd är sant annars kommer det att visa det.
Så med dessa operationer är vår logik den som kommer att diktera vilken vi ska använda i våra applikationer, dessa direktiv fungerar genom att arbeta med stilarna för elementen där de tillämpas, så om vi arbetar med egenskaperna display: block att visa och display: ingen att dölja, eftersom vi inte ser något som vi inte vet eller som är för komplext för att inte lära oss.
I följande exempel kommer vi att arbeta med att göra en menyvisning eller inte om vi klickar på ett alternativ som styr det, för detta måste vi göra följande:
1- I en fil HTML vi ska inkludera AngularJS och sedan ska vi generera den controller som hjälper oss i vår uppgif.webpt, controller -koden måste styra menyåtgärderna och skulle ha en funktion eller metod som gör ändringen när vi arbetar med direktivets tillstånd, i det här fallet kommer vi att arbeta med ng-show, låt oss se den nödvändiga koden:

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

2- Sedan måste vi förbereda våra HTML-element så att vi kan tillämpa direktivet AngularJS, för detta definierar vi $ omfattning av den registeransvarige och slutligen tillämpar vi direktivet ng-show till listan, låt oss se:

Ändra meny 
 
åtgärd 1
åtgärd2
åtgärd 3

Med detta bör vår meny visas eller döljas när vi klickar på motsvarande knapp, låt oss se hur den ser ut i vår webbläsare i båda delstaterna. Här kan vi se utgångsläget utan menyalternativ:

Sedan genom att klicka på knappen kan vi se hur menyn ser ut, nedan är koden som vår konsol upptäcker Javascript att demonstrera driften av AngularJS:

Vi märkte att i konsolkoden försvann klassen ng-hide så att du kan se menyn korrekt.
Med detta avslutar vi denna handledning där vi har lärt oss att använda showen och dölja egenskaper när vi bygger in ett program AngularJS.Gillade du och hjälpte denna handledning?Du kan belöna författaren genom att trycka på den här knappen för att ge honom en positiv poäng