Funcionalidade de mostrar e ocultar com AngularJS

AngularJS nos permite integrar as diferentes mudanças na interface do usuário com as mudanças no modelo, com isso podemos ajustar elementos como menus, listas, links, etc.., desta forma conseguimos uma experiência mais interativa e dinâmica.
Um dos efeitos mais usados ​​é mostrar e ocultar, pois de forma simples fazemos com que as opções de um menu apareçam ou não de acordo com as ações do usuário ou do modelo, AngularJS nos permite incorporá-lo de forma simples com as diretrizes ng-shgow Y ng-hide.
Se nossa aplicação for complexa, certamente teremos elementos sensíveis ao contexto, ou seja, podemos usar uma ferramenta se as condições corretas forem atendidas ou talvez devamos ocultar algumas opções do menu quando certas condições forem atendidas.
ng-show e ng-hideIsso graças a AngularJS É muito fácil de conseguir, para isso usaremos as diretrizes ng-show Y ng-hide, que tem uma operação reversa de cada um, por exemplo ng-show irá mostrar o elemento enquanto sua condição for verdadeira, se for falso irá ocultá-lo e ng-hide ele ocultará o elemento enquanto sua condição for verdadeira, caso contrário, ele o mostrará.
Portanto, com essas operações nossa lógica é a que ditará qual usaremos em nossas aplicações, essas diretivas funcionam trabalhando com os estilos dos elementos onde são aplicadas, portanto, se trabalharmos com as propriedades display: block para mostrar e Mostrar nenhum esconder, já que não vemos nada que não saibamos ou que é muito complexo para não aprender.
No exemplo a seguir vamos trabalhar fazendo a exibição de um menu ou não se clicarmos em uma opção que o controla, para isso devemos fazer o seguinte:
1- Em um arquivo HTML vamos incluir AngularJS e então vamos gerar o controlador que nos ajudará em nossa tarefa, o código do controlador deve controlar as ações do menu e teria uma função ou método que faz a mudança ao trabalhar com os estados da diretiva, neste caso iremos trabalhar com ng-show, vamos ver o código necessário:

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

2- Em seguida, devemos preparar nossos elementos HTML para que possamos aplicar a diretiva AngularJS, para isso definimos o $ scope do controlador e, finalmente, aplicamos a diretiva ng-show para a lista, vamos ver:

Mudar Menu 
 
ação1
ação2
ação3

Com isso, nosso menu deve ser mostrado ou escondido conforme clicamos no botão correspondente, vamos ver como fica em nosso navegador em ambos os estados. Aqui podemos ver o estado inicial sem itens de menu:

Então, clicando no botão podemos ver como o menu aparece, abaixo está o código que nosso console detecta Javascript para demonstrar a operação de AngularJS:

Percebemos que no código do console a classe desapareceu ng-hide permitindo assim que você veja o menu corretamente.
Com isso, terminamos este tutorial onde aprendemos a usar as propriedades show e hide quando construímos um aplicativo em AngularJS.Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo