{"id":3426,"date":"2016-06-09T08:50:22","date_gmt":"2016-06-09T11:50:22","guid":{"rendered":"https:\/\/www.mxcursos.com\/blog\/?p=3426"},"modified":"2019-03-19T09:43:44","modified_gmt":"2019-03-19T12:43:44","slug":"angularjs-entendendo-as-diretivas-ng-show-e-ng-hide","status":"publish","type":"post","link":"https:\/\/www.mxcursos.com\/blog\/angularjs-entendendo-as-diretivas-ng-show-e-ng-hide\/","title":{"rendered":"AngularJS: Entendendo as diretivas ng-show e ng-hide"},"content":{"rendered":"<p>Oi pessoal! O AngularJS permite estender\u00a0HTML com novos atributos, chamados de\u00a0<strong>diretivas<\/strong>.<\/p>\n<p>A diretiva <strong>ngShow<\/strong>, basicamente oculta o elemento no qual ela foi inserida, exibindo-o apenas mediante uma condi\u00e7\u00e3o espec\u00edfica.<br \/>\nJ\u00e1 a diretiva <strong>ngHide<\/strong>, tem um funcionamento parecido, por\u00e9m oposto. Ela por padr\u00e3o exibe o elemento no qual ela foi inserida e o oculta mediante a uma condi\u00e7\u00e3o.<\/p>\n<p>Essa condi\u00e7\u00e3o que \u00e9 adicionada na diretiva pode se dar por meio de express\u00f5es ou atrav\u00e9s de uma fun\u00e7\u00e3o. No caso da fun\u00e7\u00e3o, a diretiva \u00e9 acionada caso a fun\u00e7\u00e3o retorne true (verdadeiro).<\/p>\n<h2>Exemplo 1: Express\u00f5es<\/h2>\n<h3><strong>ngShow<\/strong><\/h3>\n<p>Vinculamos o valor de nosso input a uma vari\u00e1vel atrav\u00e9s 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\u00f3 ser\u00e3o exibidos, quando digitarmos o nome de sua cor, cumprindo assim a condi\u00e7\u00e3o que foi especificada.<\/p>\n<p><iframe width=\"100%\" height=\"300\" src=\"\/\/jsfiddle.net\/felipepinheiro94\/mfoy3f2h\/embedded\/\" allowfullscreen=\"allowfullscreen\" frameborder=\"0\"><\/iframe><\/p>\n<h3><strong>ngHide<\/strong><\/h3>\n<p>Neste outro c\u00f3digo, vinculamos novamente uma vari\u00e1vel ao nosso input, que dessa vez \u00e9 do tipo checkbox. Sendo assim, quando ele est\u00e1 marcado, recebe o valor true e quando desmarcado, o valor false \u00e9 atribu\u00eddo a ele. Note que o texto dessa vez, permanece vis\u00edvel, at\u00e9 marcarmos o checkbox.<\/p>\n<p><iframe width=\"100%\" height=\"300\" src=\"\/\/jsfiddle.net\/felipepinheiro94\/b3f0cn3c\/embedded\/\" allowfullscreen=\"allowfullscreen\" frameborder=\"0\"><\/iframe><\/p>\n<h2>Exemplo 2: Fun\u00e7\u00f5es<\/h2>\n<h3><strong>ng-Show<\/strong><\/h3>\n<p>Neste exemplo, utilizamos uma fun\u00e7\u00e3o para verificar se h\u00e1 algum valor na vari\u00e1vel que foi atribu\u00edda ao input. Caso a vari\u00e1vel n\u00e3o esteja vazia, a fun\u00e7\u00e3o <strong> exibe() retornar\u00e1 true<\/strong> (verdadeiro), ent\u00e3o escreveremos o valor dela.<\/p>\n<p><iframe width=\"100%\" height=\"300\" src=\"\/\/jsfiddle.net\/felipepinheiro94\/h12r29xv\/embedded\/\" allowfullscreen=\"allowfullscreen\" frameborder=\"0\"><\/iframe><\/p>\n<h3><strong>ng-Hide<\/strong><\/h3>\n<p>J\u00e1 neste exemplo, temos duas vari\u00e1veis e uma fun\u00e7\u00e3o. Basicamente, o nome ficar\u00e1 vis\u00edvel enquanto o checkbox estiver desmarcado, uma vez que inserimos a fun\u00e7\u00e3o <strong>ocultar()<\/strong> em nossa diretiva ngHide. Sendo assim, a diretiva s\u00f3 ser\u00e1 aplicada quando a fun\u00e7\u00e3o <strong>retornar true<\/strong> (verdadeiro).<\/p>\n<p><iframe width=\"100%\" height=\"300\" src=\"\/\/jsfiddle.net\/felipepinheiro94\/rad7c3f5\/embedded\/\" allowfullscreen=\"allowfullscreen\" frameborder=\"0\"><\/iframe><\/p>\n<p>Esses foram exemplos bem b\u00e1sicos da utiliza\u00e7\u00e3o dessas duas diretivas que podem nos ajudar bastante em diversas situa\u00e7\u00f5es.<\/p>\n<p>Bons estudos!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Oi pessoal! O AngularJS permite estender\u00a0HTML com novos atributos, chamados de\u00a0diretivas. A diretiva ngShow, basicamente oculta o elemento no qual ela foi inserida, exibindo-o apenas mediante uma condi\u00e7\u00e3o espec\u00edfica. J\u00e1 a diretiva ngHide, tem um funcionamento parecido, por\u00e9m oposto. Ela por padr\u00e3o exibe o elemento no qual ela foi inserida e o oculta mediante a [&hellip;]<\/p>\n","protected":false},"author":25,"featured_media":3599,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[678],"tags":[1236],"class_list":["post-3426","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvimento","tag-angularjs"],"_links":{"self":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts\/3426","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/comments?post=3426"}],"version-history":[{"count":0,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts\/3426\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/media\/3599"}],"wp:attachment":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/media?parent=3426"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/categories?post=3426"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/tags?post=3426"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}