Instruction ng-switch d'AngularJS

Définition et utilisation

ng-switch L'instruction permet de masquer ou d'afficher des éléments HTML en fonction d'une expression.

Si les éléments enfants passent par ng-switch-when Lorsque l'instruction obtient une correspondance, elle affiche celle-ci avec ng-switch-when Les éléments enfants de l'instruction, sinon l'élément et ses éléments enfants sont supprimés.

Vous pouvez également utiliser ng-switch-default L'instruction définit une partie par défaut, qui est affichée lorsque toutes les autres parties ne correspondent pas.

Exemple

Une partie de HTML est affichée uniquement lorsque cette valeur correspond à une valeur spécifique :

<div ng-switch="myVar">
  <div ng-switch-when="dogs">
    <h1>Chiens</h1>
    <p>Bienvenue dans un monde de chiens.</p>
  </div>
  <div ng-switch-when="tuts">
    <h1>Tutoriels</h1>
    <p>Apprendre des exemples.</p>
  </div>
  <div ng-switch-when="cars">
    <h1>Voitures</h1>
    <p>Lisez à propos des voitures.</p>
  </div>
  <div ng-switch-default>
    <h1>Basculer</h1>
    <p>Sélectionnez le sujet dans la liste déroulante pour basculer le contenu de ce DIV.</p>
  </div>
</div>

Essayez-le vous-même

Syntaxe

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

Tous les éléments HTML supportent.

Paramètres