Blog do MX Cursos

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

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

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.

Nossos cursos indicados

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!