AngularJS ng-switch 指令

定義と使用法

ng-switch 指令は、式に基づいてHTML要素を非表示/表示することを許可します。

子要素が ng-switch-when 指令が一致項目を取得すると、 ng-switch-when 指令の子要素を使用しない場合、その要素およびその子要素は削除されます。

さらに、 ng-switch-default 指令は、他の部分に一致しない場合に表示するデフォルトの部分を定義します。

例

特定の値に一致する場合にのみ、一部のHTMLを表示します：

<div ng-switch="myVar">
  <div ng-switch-when="dogs">
    <h1>犬</h1>
    <p>犬の世界へようこそ。</p>
  </div>
  <div ng-switch-when="tuts">
    <h1>チュートリアル</h1>
    <p>例から学びましょう。</p>
  </div>
  <div ng-switch-when="cars">
    <h1>車</h1>
    <p>車について読んでください。</p>
  </div>
  <div ng-switch-default>
    <h1>切り替え</h1>
    <p>ドロップダウンからトピックを選択して、この DIV のコンテンツを切り替えます。</p>
  </div>
</div>

実際に試してみましょう

文法

<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>

すべての HTML 要素がサポートされています。

パラメータ