Directiva ng-switch de AngularJS

Definición y uso

ng-switch La directiva te permite ocultar/mostrar elementos HTML según una expresión.

Si los elementos hijos ng-switch-when La directiva muestra la sección con ng-switch-when Los elementos hijos de la directiva, de lo contrario se eliminarán el elemento y sus elementos hijos.

También puedes usar ng-switch-default La directiva define la parte predeterminada para que se muestre cuando todas las otras partes no coinciden.

Ejemplo

Mostrará una parte de HTML solo cuando coincida con un valor específico:

<div ng-switch="myVar">
  <div ng-switch-when="dogs">
    <h1>Perros</h1>
    <p>¡Bienvenido a un mundo de perros!</p>
  </div>
  <div ng-switch-when="tuts">
    <h1>Tutoriales</h1>
    <p>Aprende de ejemplos.</p>
  </div>
  <div ng-switch-when="cars">
    <h1>Coches</h1>
    <p>Lea sobre coches.</p>
  </div>
  <div ng-switch-default>
    <h1>Interruptor</h1>
    <p>Seleccione un tema del desplegable para cambiar el contenido de este DIV.</p>
  </div>
</div>

Prueba por tu cuenta

Sintaxis

<elemento ng-switch="expression">
  <elemento ng-switch-when="value"></elemento>
  <elemento ng-switch-when="value"></elemento>
  <elemento ng-switch-when="value"></elemento>
  <elemento ng-switch-default></elemento>
</elemento>

Todos los elementos HTML admiten.

Parámetros