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. Si la expresión que contiene es falsa, el elemento se elimina y, si es verdadera, el elemento se agrega al DOM.
Sintaxis:
<element ng-if="expression"> Contents... </element>
Acercarse:
- Considere una lista de verificación hecha que contiene tres elementos.
- Una vez que se compran todos los artículos, mostramos un mensaje: «¡Todo está comprado!».
- Al iniciar, NG-IF elimina este mensaje de una parte del árbol DOM y se basa en la expresión cuando se evalúa como verdadero cuando se recrea en DOM.
- Para observar estos cambios, vamos a inspeccionar el código en el navegador web. Diferentes formas de acercarse a habilitar Inspeccionar en Google Chrome:
- Barra de menús -> Más herramientas -> Herramientas para desarrolladores.
- Haga clic derecho en el navegador -> Inspeccionar
- Ctrl + Mayús + I (Windows)
- Cmd + Opc + I (Mac OS)
Nota: Para obtener más información, vaya a chrome-inspect-element-tool-shortcut.
Implementación de código:
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://www.w3schools.com/w3css/4/w3.css">
<script type="text/javascript" src=
"https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.0/angular.min.js">
</script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl"
class="w3-container">
<h1 align="center" class="w3-text-green">
GeeksforGeeks
</h1>
<h4 align="center" class="w3-text-green">
A computer science portal for geeks
</h4>
<ul>
<li ng-repeat="item in items">
Buy {{item.name}} {{item.quantity}}
<button ng-click=Bought($index)
class="w3-button w3-round w3-border
w3-margin-bottom">
Bought
</button>
</li>
</ul>
<p class="w3-text-red" align="center"
ng-if="items.length == 0">
Everything is Bought!
</p>
</div>
<script type="text/javascript">
(function () {
angular.module("myApp", []).controller(
"myCtrl", function ($scope) {
$scope.items = [
{ name: "Milk", quantity: "2 Packet" },
{ name: "Biscuit", quantity: "10 Packet" },
{ name: "Bread", quantity: "5 Packet" }
];
$scope.Bought = function (index) {
$scope.items.splice(index, 1);
};
});
})();
</script>
</body>
</html>
Producción:
Antes de hacer clic en todos los botones: aquí tenemos tres botones para hacer clic y comprar los artículos respectivos.
En la ventana Inspeccionar: podemos ver que ng-if está comentado y una parte del árbol DOM como expresión evaluada como Falsa.
Después de hacer clic en todos los botones: como hemos hecho clic en todos los botones y comprado todos los artículos, se muestra un mensaje en la pantalla.
En la ventana Inspeccionar: podemos ver que ng-if ya no está comentado y ahora es parte del árbol DOM como expresión evaluada como Verdadera.
Esta salida gif muestra lo que está sucediendo.
Publicación traducida automáticamente
Artículo escrito por abhishekkharmale y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA