¿Cuál es la diferencia entre las directivas ng-if y data-ng-if?

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *