En este artículo, explicaremos acerca de las directivas ng-if, ng-show y ng-hide.
- Directiva ng-if:
La directiva ng-if en AngularJS se usa para eliminar o recrear una parte del elemento HTML en función de una expresión.
Sintaxis:
<element ng-if="expression"></element>
Ejemplo:
En el siguiente ejemplo, cuando hay texto en el elemento de entrada, se mostrará el contenido div; de lo contrario, se ocultará.
<!DOCTYPE html><html><script src=</script><body ng-app="">Enter Text:<input type="text"ng-model="textcheck"><div ng-if="textcheck"><h1 style="color:green">GeeksforGeeks</h1></div></body></html>Producción:
Cuando hay texto en el campo de entrada, se agrega Heading div a HTML DOM y se muestra, pero cuando el campo de entrada está vacío, se elimina div y no se muestra.
- Directiva ng-show: la directiva ng-show en AngluarJS se usa para mostrar u ocultar el elemento HTML especificado.
Si la expresión dada en el atributo ng-show es verdadera , entonces el elemento HTML se mostrará ; de lo contrario, ocultará el elemento HTML.
Sintaxis:
<element ng-show="expression"> </element>
Ejemplo:
En el siguiente ejemplo, cuando se selecciona su casilla de verificación, se mostrará el contenido div; de lo contrario, se ocultará.
<!DOCTYPE html><html><scriptsrc=</script><bodyng-app=""><inputtype="checkbox"ng-model="check"><divng-show="check"><h1style="color:green">GeeksforGeeks</h1></div></body></html>Producción:
Cuando la casilla de verificación está seleccionada, el atributo HTML div se configura para mostrarse; de lo contrario, se oculta.
- Directiva ng-hide: la directiva ng-hide en AngluarJS se usa para mostrar u ocultar el elemento HTML especificado.
Si la expresión dada en el atributo ng-hide es verdadera, los elementos HTML se ocultan.
ng-hide también es una clase CSS predefinida en AngularJS y establece la visualización del elemento en none .
Sintaxis:
<element ng-hide="expression"> </element>
Ejemplo:
En este ejemplo, si se selecciona la casilla de verificación, esto significa que el atributo ng-hide es verdadero y los elementos HTML se ocultarán.
<!DOCTYPE html><html><scriptsrc=</script><bodyng-app="">Show DIV:<inputtype="checkbox"ng-model="check"><divng-hide="check"><h1style="color:green">GeeksforGeeks</h1></div></body></html>Producción:
Cuando la casilla de verificación está seleccionada , el atributo HTML div se configura para ocultarse; de lo contrario, se muestra .
Diferencia básica entre ng-if, ng-show y ng-hide
| directiva ng-if | directiva ng-show | directiva ng-hide |
|---|---|---|
| La directiva ng-if elimina o recrea una parte del árbol DOM en función de una expresión, en lugar de ocultarla. | La directiva ng-show muestra u oculta el elemento HTML dado en función de la expresión proporcionada al atributo ng-show | La directiva ng-hide muestra u oculta el elemento HTML dado en función de la expresión proporcionada al atributo ng-hide. |
| ng-if solo puede representar datos siempre que la condición sea verdadera. No tiene ningún dato renderizado hasta que la condición sea verdadera. | ng-show puede mostrar y ocultar los datos renderizados, es decir, siempre mantuvo los datos renderizados y mostrar u ocultar sobre la base de esas directivas. | ng-hide puede mostrar y ocultar los datos renderizados, es decir, siempre mantuvo los datos renderizados y mostrar u ocultar sobre la base de esas directivas. |
Por lo tanto, existe una diferencia considerable entre las directivas ng-if, ng-show y ng-hide que las hace diferentes para sus usos.