Pokaż i ukryj funkcjonalność z AngularJS

AngularJS pozwala nam zintegrować różne zmiany w interfejsie użytkownika ze zmianami w modelu, dzięki temu możemy dostosować takie elementy jak menu, listy, linki itp.., w ten sposób osiągamy bardziej interaktywne i dynamiczne doświadczenie.
Jednym z najczęściej używanych efektów jest pokazywanie i ukrywanie, ponieważ w prosty sposób sprawiamy, że opcje w menu pojawiają się lub nie w zależności od działań użytkownika lub modelu, AngularJS pozwala na włączenie go w prosty sposób do dyrektyw ng-shgow Tak ng-ukryj.
Jeśli nasza aplikacja jest złożona, na pewno będziemy mieć elementy wrażliwe na kontekst, czyli możemy użyć narzędzia, jeśli spełnione zostaną odpowiednie warunki, lub może powinniśmy ukryć niektóre opcje menu, gdy spełnione zostaną określone warunki.
ng-pokaż i ng-ukryjTo dzięki AngularJS Jest to bardzo łatwe do osiągnięcia, do tego posłużymy się dyrektywami ng-show Tak ng-ukryj, które mają odwrotne działanie każdego z nich, na przykład ng-show pokaże element, o ile jego warunek jest spełniony, jeśli jest fałszywy, ukryje go i ng-ukryj ukryje element, o ile jego warunek jest spełniony, w przeciwnym razie go pokaże.
Tak więc przy tych operacjach nasza logika będzie dyktować, którą z nich będziemy używać w naszych aplikacjach, te dyrektywy działają poprzez pracę ze stylami elementów, w których są stosowane, więc jeśli pracujemy z właściwościami Blok wyświetlacza pokazać i Nie wyświetla się ukrywać, ponieważ nie widzimy niczego, czego nie wiemy lub czego nie można się nauczyć.
W poniższym przykładzie będziemy pracować nad wyświetlaniem menu lub nie, jeśli klikniemy opcję, która je kontroluje, w tym celu musimy wykonać następujące czynności:
1- w pliku HTML dołączymy AngularJS a potem wygenerujemy kontroler, który pomoże nam w naszym zadaniu, kod kontrolera musi sterować akcjami menu i miałby funkcję lub metodę, która dokonuje zmiany podczas pracy ze stanami dyrektywy, w tym przypadku będziemy pracować z ng-show, zobaczmy potrzebny kod:

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

2- Następnie musimy przygotować nasze elementy HTML, abyśmy mogli zastosować dyrektywę AngularJS, w tym celu definiujemy $ zakres kontrolera i wreszcie stosujemy dyrektywę ng-show do listy zobaczmy:

Zmień menu 
 
akcja1
akcja2
akcja3

Dzięki temu nasze menu powinno być pokazane lub ukryte, gdy klikniemy odpowiedni przycisk, zobaczmy, jak wygląda w naszej przeglądarce w obu stanach. Tutaj możemy zobaczyć stan początkowy bez elementów menu:

Następnie klikając na przycisk możemy zobaczyć jak wygląda menu, poniżej kod wykryty przez naszą konsolę JavaScript zademonstrować działanie AngularJS:

Zauważyliśmy, że w kodzie konsoli zniknęła klasa ng-ukryj co pozwala na prawidłowe wyświetlenie menu.
Na tym kończymy ten samouczek, w którym nauczyliśmy się korzystać z właściwości pokaż i ukryj, gdy budujemy aplikację w AngularJS.Podobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt