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. Es compatible con todos los elementos HTML.
Sintaxis:
<element ng-show="expression"> Contents... </element>
Ejemplo 1: este ejemplo utiliza la directiva ng-show para mostrar el elemento HTML después de marcar la casilla de verificación.
<!DOCTYPE html>
<html>
<head>
<title>ng-show Directive</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body>
<div ng-app="app" ng-controller="geek">
<h1 style="color:green">GeeksforGeeks</h1>
<h2>ng-show Directive</h2>
<input id="chshow" type="checkbox" ng-model="show" />
<label for="chshow">
Show Paragraph
</label>
<p ng-show="show" style="background: green; color: white;
font-size: 14px; width:35%; padding: 10px;">
Show this paragraph using ng-show
</p>
</div>
<script>
var myapp = angular.module("app", []);
myapp.controller("geek", function ($scope) {
$scope.show = false;
});
</script>
</body>
</html>
Salida:
Antes de marcar la casilla de verificación: 
Después de marcar la casilla de verificación:
Ejemplo 2: este ejemplo utiliza la directiva ng-show para mostrar el número ingresado como múltiplo de 5 o no.
<!DOCTYPE html>
<html>
<head>
<title>ng-show Directive</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body ng-app="app" style="text-align:center">
<div ng-controller="geek" ng-init="val=0">
<h1 style="color:green">GeeksforGeeks</h1>
<h2>ng-show Directive</h2>
Enter a number:
<input type="text" ng-model="val" ng-keyup="check(val)">
<div ng-hide="show">
<h3>
The number is multiple of 5
</h3>
</div>
<div ng-show="show">
<h3>
The number is not a multiple of 5
</h3>
</div>
</div>
<script>
var app = angular.module("app", []);
app.controller('geek', ['$scope', function ($scope) {
$scope.check = function (val) {
$scope.show = val % 5 == 0 ? false : true;
};
}]);
</script>
</body>
</html>
Producció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