Felipe PinheiroOi 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.
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!
