Instruzione ng-switch di AngularJS

Definizione e uso

ng-switch L'instruzione ti permette di nascondere o visualizzare elementi HTML in base a un'espressione.

Se l'elemento figlio attraverso ng-switch-when Quando l'instruzione ottiene una corrispondenza, viene visualizzata la parte con ng-switch-when Se l'elemento figlio non è attraverso l'instruzione, verrà eliminato l'elemento e i suoi figli.

Puoi anche usare ng-switch-default L'instruzione definisce la parte predefinita da visualizzare quando nessun'altra parte corrisponde.

Esempio

Visualizza una parte di HTML solo quando corrisponde a un valore specifico:

<div ng-switch="myVar">
  <div ng-switch-when="dogs">
    <h1>Cani</h1>
    <p>Benvenuti in un mondo di cani.
  </div>
  <div ng-switch-when="tuts">
    <h1>Tutoriali</h1>
    <p>Impara dagli esempi.
  </div>
  <div ng-switch-when="cars">
    <h1>Auto</h1>
    <p>Leggi dell'auto.</p>
  </div>
  <div ng-switch-default>
    <h1>Switch</h1>
    <p>Seleziona il tema dal menu a discesa per passare al contenuto di questo DIV.</p>
  </div>
</div>

Prova personalmente

Sintassi

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

Tutti gli elementi HTML supportano.

Parametro