La directiva ng-if en AngularJS se usa para eliminar o recrear una parte del elemento HTML en función de una expresión. El ng-if es diferente de ng-hide porque elimina completamente el elemento en el DOM en lugar de simplemente ocultar la visualización del elemento. 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>
Si la expresión devuelve verdadero, se crea el elemento y si la expresión devuelve falso, el elemento se elimina por completo.
Ejemplo 1: este ejemplo cambia el contenido después de hacer clic en el botón.
HTML
<!DOCTYPE html>
<html>
<head>
<title>ng-if Directive</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body ng-app="geek" style="text-align:center">
<h1 style="color:green">
GeeksforGeeks
</h1>
<h2>ng-if Directive</h2>
<div ng-controller="app as vm">
<div ng-if="!vm.IsShow">
<input type="button" class="btn btn-primary"
ng-click="vm.IsShow=!vm.IsShow"
value="Sign in">
<p>Click to Sign in</p>
</div>
<div ng-if="vm.IsShow">
<button class="btn btn-primary"
ng-click="vm.IsShow=!vm.IsShow">
Sign out
</button>
<p>
GeeksforGeeks is the computer
science portal for geeks.
</p>
</div>
</div>
<script>
var app = angular.module("geek", []);
app.controller('app', ['$scope', function ($scope) {
var vm = this;
}]);
</script>
</body>
</html>
Salida:
antes de hacer clic en el botón:
Después de hacer clic en el botón:
Ejemplo 2: este ejemplo agregó algo de contenido al marcar la casilla de verificación.
html
<!DOCTYPE html>
<html>
<head>
<title>ng-if Directive</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<style>
.geek {
border: 1px solid black;
padding: 10px;
font-size: 15px;
color: white;
width: 50%;
background: green;
}
</style>
</head>
<body ng-app style="padding:30px">
<h1 style="color:green">
GeeksforGeeks
</h1>
<h2>ng-if Directive</h2>
<div>
<input type="checkbox" ng-model="showDiv" />
<label for="showDiv">
Check it
</label>
<br><br>
<div class="geek" ng-if="showDiv">
GeeksforGeeks is the computer science
portal for geeks.
</div>
</div>
</body>
</html>
Salida:
antes de marcar marcado en la casilla de verificación:
Después de marcar marcado en la casilla de verificación:
Publicación traducida automáticamente
Artículo escrito por Vishal Chaudhary 2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA