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).
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.
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.
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.
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!
Nos últimos anos, testemunhamos uma revolução na forma como os sites são criados, impulsionada pelo…
A animação 3D tem sido uma forma poderosa de contar histórias e criar experiências visuais…
Nos últimos anos, a inteligência artificial (IA) tem revolucionado a forma como criamos e editamos…
Nos últimos anos, a integração da inteligência artificial (IA) na criação de sites tem revolucionado…
Nos últimos anos, a edição de vídeo evoluiu rapidamente com o avanço da tecnologia, e…
A dublagem de filmes desempenha um papel fundamental na indústria cinematográfica, permitindo que obras de…
This website uses cookies.
Ver comentários
Valeu cara ajudo pra caramba, estava quebrando a cabeça para criar uma função assim como a ng-show por falta de ainda não conhecer esta função. valeu