Entradas

Mostrando entradas de agosto, 2015

AngularJS tips: ng-if versus ng-show

El hombre es el único animal que tropieza dos veces con la misma piedra, y en mi caso lo puedo hacer incluso 5 ó 6 veces, por eso quiero escribir esta entrada acerca del uso de las directivas ng-if y ng-show (y por extensión de ng-hide) de AngularJS.

El problema
Pero primero lo primero, veamos que hacen estas dos directivas en un breve ejemplo de código.



Si ejecutas este código en tu navegador verás que tan sólo aparece un input en pantalla y que el resto de código HTML no se muestra. Esto se debe al uso de las directivas ng-if y ng-show que tienen precisamente esa finalidad, ocultar elementos mientras la evaluación de sus condiciones no se cumplan. En este caso cuando escribimos la palabra "test" en el input, ambos elementos se harán visibles instantáneamente.

Pero en este código hay más de lo que parece. Si te fijas en el bloque script al final del body, verás que hay una función asociada al evento onclick de los elementos ocultos. Y si haces click en cada uno de los divs …