Instrução ng-switch do AngularJS

Definição e uso

ng-switch A diretiva permite que você oculte / exiba elementos HTML com base na expressão.

Se o elemento filho passar ng-switch-when A diretiva obterá o item correspondente e exibirá o item com ng-switch-when Os elementos filhos da diretiva, senão o elemento e seus filhos serão removidos.

Você também pode usar ng-switch-default A diretiva define a parte padrão para ser exibida quando nenhuma outra parte coincidir.

Exemplo

Apenas quando ele coincide com um valor específico, parte do HTML é exibida:

<div ng-switch="myVar">
  <div ng-switch-when="dogs">
    <h1>Cães</h1>
    <p>Bem-vindo a um mundo de cães.</p>
  </div>
  <div ng-switch-when="tuts">
    <h1>Tutoriais</h1>
    <p>Aprenda com exemplos.</p>
  </div>
  <div ng-switch-when="cars">
    <h1>Carros</h1>
    <p>Leia sobre carros.</p>
  </div>
  <div ng-switch-default>
    <h1>Alternar</h1>
    <p>Selecione o tópico da lista suspensa para alternar o conteúdo deste DIV.</p>
  </div>
</div>

Experimente você mesmo

Sintaxe

<elemento ng-switch="expressão">
  <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 os elementos HTML suportam.

Parâmetros