AngularJSng-switchディレクティブ
例
特定の値に一致する場合にのみ、HTMLのセクションを表示します。
<div ng-switch="myVar">
<div ng-switch-when="dogs">
<h1>Dogs</h1>
<p>Welcome to a world of dogs.</p>
</div>
<div ng-switch-when="tuts">
<h1>Tutorials</h1>
<p>Learn from examples.</p>
</div>
<div ng-switch-when="cars">
<h1>Cars</h1>
<p>Read about cars.</p>
</div>
<div ng-switch-default>
<h1>Switch</h1>
<p>Select topic from the dropdown, to switch the content of this DIV.</p>
</div>
</div>
定義と使用法
ディレクティブを使用すると、ng-switch式に応じてHTML要素を表示/非表示にできます。
ディレクティブを持つ子要素ng-switch-whenは、一致する場合は表示され、一致しない場合は要素とその子が削除されます。
ng-switch-default
ディレクティブを使用してデフォルトのセクションを定義し、他のセクションのいずれにも一致しない場合にセクションを表示することもできます。
構文
<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要素でサポートされています。
パラメータ値
| Value | Description |
|---|---|
| expression | An expression that will remove elements with no match, and display elements with a match. |