O 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., para obter uma experiência mais interativa e dinâmica.
Um dos efeitos mais utilizados é o show and hide, pois, de maneira 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, o AngularJS nos permite incorporá-lo de maneira simples com as diretrizes ng-shgow e ng-hide .
Mostrar e ocultar
Se nossa aplicação for complexa, certamente teremos elementos sensíveis ao contexto, ou seja, poderemos usar alguma ferramenta se as condições corretas existirem ou precisarmos ocultar algumas opções de menu quando existirem determinadas condições.
ng-show e ng-hide
Isso graças ao AngularJS é muito simples de conseguir, pois usaremos as diretrizes ng-show e ng-hide, que possuem uma operação inversa de cada uma, por exemplo, ng-show mostrará o elemento sempre que sua condição for verdadeira, no caso de sendo falso o ocultará e ng-hide ocultará o elemento sempre que sua condição for verdadeira, caso contrário, ele o mostrará.
Portanto, com essas operações, nossa lógica é o que ditará o que usaremos em nossos aplicativos. Essas diretivas funcionam trabalhando com os estilos dos elementos em que são aplicados; portanto, se trabalharmos com as propriedades display: block para mostrar e exibir: none to hide, como não vemos nada que não sabemos ou que é muito complexo para não aprender.
Exemplo Prático
No exemplo a seguir, trabalharemos exibindo 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, incluiremos o AngularJS e, em seguida, geraremos o driver que nos ajudará em nossa tarefa, o código do controlador deve controlar as ações do menu e terá uma função ou método que faça a alteração ao trabalhar com os estados de a diretiva, neste caso, trabalharemos com o ng-show, vamos ver o código necessário:
função ShowHideController ($ scope) {$ scope.menuState = {} $ scope.menuState.show = false; $ scope.changeMenu = function () {$ scope.menuState.show =! $ scope.menuState.show; }; } 2- Então devemos preparar nossos elementos HTML para que possamos aplicar a diretiva AngularJS, para isso definimos o escopo $ do controlador e finalmente aplicamos a diretiva ng-show à lista, vamos ver:
Alterar menu
- action1
- action2
- action3
Com isso, nosso menu deve ser exibido ou oculto ao clicar no botão correspondente, vamos ver como fica em nosso navegador nos dois estados. Aqui podemos ver o estado inicial sem itens no menu:
Então, clicando no botão, podemos ver como o menu aparece, abaixo está o código que detecta nosso console Javascript para demonstrar a operação do AngularJS :
Percebemos que a classe ng-hide desapareceu no código do console, permitindo ver o menu corretamente.
Com isso, concluímos este tutorial, onde aprendemos a usar as propriedades show and hide quando construímos um aplicativo no AngularJS .
- 0 0
Artigo