De modo bem simples:
ng-show
: quando você quiser exibir um conteúdo com alguma condição;
ng-hide
: quando você quiser esconder um conteúdo com alguma condição;
Caso 01: Exibir uma div quando o valor de nome
for Pedro
<div ng-show="nome == 'Pedro'"> </div>
Caso 02: Esconder uma div quando valor de idade
for menor que 18:
<div ng-hide="idade < 18"> </div>
No Caso 01, a div
só será exibida se o valor de nome for "Pedro", se for qualquer outro valor, seja ele válido ou não, ela nunca será exibida. O mesmo acontece para o Caso 02, porém com a lógica inversa. A div
sempre será exibida, no entanto, se a idade for menor que 18, ela não será exibida.
Observação importante
O que você deve estar ciente ao usar ng-show
e/ou ng-hide
é que a div
(ou qualquer outro elemento usando as propriedades) ainda irá existir em seu html
. O efeito deles é de apenas controlar a exibição através da propriedade css display
mudando display:hidden
quando precisar excluir.
Em contra partida, existe o ng-if
, ele funciona de modo semelhante, veja:
<div ng-if="nome == 'Pedro'"></div>
Neste caso a div
só será exibida se o valor de nome for Pedro.
Mas então, qual a diferença?
O ng-if
não vai renderizar a div
em seu html
enquanto o valor não for "Pedro", ou seja, ela não existe em seu html
.
ng-show="!store.product.soldOut"
equivale ang-hide="store.product.soldOut"
. – OnoSendai 2/02/16 às 16:06