La directiva ng-switch en AngularJS se usa para especificar la condición para mostrar/ocultar los elementos secundarios en HTML DOM. El elemento HTML se mostrará solo si la expresión dentro de la directiva ng-switch devuelve verdadero; de lo contrario, se ocultará. Es compatible con todos los elementos HTML.
Sintaxis:
<element ng-switch="expression"> <element ng-switch-when="value"> Contents... </element> <element ng-switch-when="value"> Contents... </element> <element ng-switch-default> Contents... </element> </element>
Ejemplo 1: este ejemplo utiliza la directiva ng-switch para cambiar el elemento.
<!DOCTYPE html> <html> <head> <title>ng-switch Directive</title> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"> </script> </head> <body ng-app="" style=""> <h1 style="color:green;">GeeksforGeeks</h1> <h2>ng-switch Directive</h2> <div> <form> <label> <input type="radio" value="search" ng-model="switch.Data"> Searching Algorithms </label> <label> <input type="radio" value="sort" ng-model="switch.Data"> Sorting Algorithms </label> </form> <div ng-switch="switch.Data" id="wrapper"> <div ng-switch-when="search"> <h2> Searching Algorithms</h2> <ul> <li>Binary Search <li>Linear Search </ul> </div> <div ng-switch-when="sort"> <h2>Sorting Algorithms</h2> <ul> <li>Merge Sort <li>Quick Sort </ul> </div> </div> </div> </body> </html>
Producción:
- Antes de hacer clic en el botón de radio:
- Después de hacer clic en el botón de opción Buscando:
- Después de hacer clic en el botón de opción Clasificación:
Ejemplo 2: este ejemplo utiliza la directiva ng-switch para mostrar el número ingresado.
<!DOCTYPE html>
<html>
<head>
<title>ng-switch Directive</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js">
</script>
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="" style="text-align:center;">
<h1 style="color:green;">GeeksforGeeks</h1>
<h2 style="">ng-switch Directive</h2>
<div>
<div class="col-md-3">
Type Number(1-2):
<input ng-model="number" type="number" />
</div><br>
<div ng-switch="number" class="col-md-3">
<div ng-switch-when="1" class="btn btn-danger">
You entered {{number}}
</div>
<div ng-switch-when="2" class="btn btn-primary">
You entered {{number}}
</div>
<div ng-switch-default class="well">
This is the default section.
</div>
</div>
</div>
</body>
</html>
Producción:
- Antes de ingresar el texto:
- Después de ingresar el texto:
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