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