ng-if es una directiva en AngularJS que se usa para eliminar el elemento HTML si el valor de la expresión o variable es falso, a diferencia de ng-hide, que solo oculta el elemento HTML del DOM.
Sintaxis:
<element angular_directive=expression> Contents... </element>
Hay algunas otras opciones que se comportan como ng-if . No hay diferencia entre ellos en cuanto a funcionalidad.
- ng: si
- ng_si
- x-ng-si
- datos-ng-si
Nota: La mejor práctica es usar ng-if only.
La razón detrás de por qué estas opciones entran en escena es que en AngularJS nos referimos a la directiva usando camel case (ejemplo: ngIf) pero cuando lo usamos en HTML, ya que HTML no distingue entre mayúsculas y minúsculas, usamos un formulario delimitado por guiones (ejemplo: ng -if) u otros delimitadores como se menciona en la lista anterior. Entonces, AngularJS normaliza (significa que convierte la forma delimitadora en camelcase) la etiqueta del elemento y descubre a qué directiva pertenece el elemento.
Ejemplo 1: este ejemplo utiliza la directiva «data-ng-if» .
<!DOCTYPE html> <html> <head> <title> What is the difference between ng-if and data-ng-if directives ? </title> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </script> </head> <body ng-app=""> <center> <h1 style="color:green"> GeeksforGeeks </h1> <input ng-model="var1"> <div data-ng-if="var1"> <h3> This will disappear if the value of input var1 is set to false and will appear again when true </h3> </div> </center> </body> </html>
Producción:
Ejemplo 2: este ejemplo usa la directiva «ng-if» .
<!DOCTYPE html> <html> <head> <title> What is the difference between ng-if and data-ng-if directives ? </title> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </script> </head> <body ng-app=""> <center> <h1 style="color:green"> GeeksforGeeks </h1> <input ng-model="var1"> <div ng-if="var1"> <h3> This will disappear if the value of input var1 is set to false and will appear again when true </h3> </div> </center> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por sivapriyatn y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA