Blog do MX Cursos

AngularJS: Entendendo as diretivas ng-show e ng-hide

AngularJS: Entendendo as diretivas ng-show e ng-hide
Avaliar post

Oi pessoal! O AngularJS permite estender HTML com novos atributos, chamados de diretivas.

A diretiva ngShow, basicamente oculta o elemento no qual ela foi inserida, exibindo-o apenas mediante uma condição específica.
Já a diretiva ngHide, tem um funcionamento parecido, porém oposto. Ela por padrão exibe o elemento no qual ela foi inserida e o oculta mediante a uma condição.

Essa condição que é adicionada na diretiva pode se dar por meio de expressões ou através de uma função. No caso da função, a diretiva é acionada caso a função retorne true (verdadeiro).

Exemplo 1: Expressões

ngShow

Vinculamos o valor de nosso input a uma variável através da diretiva ngModel. De acordo com o valor digitado no input, exibiremos uma div colorida usando a diretiva ngShow. Note que ao adicionar a diretiva, os blocos coloridos ficam ocultos e só serão exibidos, quando digitarmos o nome de sua cor, cumprindo assim a condição que foi especificada.

ngHide

Neste outro código, vinculamos novamente uma variável ao nosso input, que dessa vez é do tipo checkbox. Sendo assim, quando ele está marcado, recebe o valor true e quando desmarcado, o valor false é atribuído a ele. Note que o texto dessa vez, permanece visível, até marcarmos o checkbox.

Exemplo 2: Funções

ng-Show

Neste exemplo, utilizamos uma função para verificar se há algum valor na variável que foi atribuída ao input. Caso a variável não esteja vazia, a função exibe() retornará true (verdadeiro), então escreveremos o valor dela.

Dica do redator: Quer se especializar ou potencializar suas habilidades em HTML5, CSS3, Javascript, jQuery, Bootstrap, entre outros? Conheça todos nossos Cursos Online de Desenvolvimento Front-End em Vídeo Aulas.

ng-Hide

Já neste exemplo, temos duas variáveis e uma função. Basicamente, o nome ficará visível enquanto o checkbox estiver desmarcado, uma vez que inserimos a função ocultar() em nossa diretiva ngHide. Sendo assim, a diretiva só será aplicada quando a função retornar true (verdadeiro).

Esses foram exemplos bem básicos da utilização dessas duas diretivas que podem nos ajudar bastante em diversas situações.

Bons estudos!

Felipe Pinheiro

Felipe Pinheiro

22 anos. Estudante de Sistemas de Informação. Desenvolvedor web no MX Cursos desde 2014.

Clube de Cursos

Conheça nosso Clube de Cursos e potencialize suas habilidades em Produção e Edição de Vídeos, Design, Marketing Digital, Programaço, WordPress, 3D e Modelagem, Motion Graphics e muito mais!

CONHEÇA O CLUBE

Your Header Sidebar area is currently empty. Hurry up and add some widgets.