AngularJS ng-switch Directive
Display corresponding sections based on the selected value:
<div ng-switch="myVar">
<div ng-switch-when="tutorialpro">
<h1>tutorialpro.org</h1>
<p>Welcome to tutorialpro.org</p>
</div>
<div ng-switch-when="google">
<h1>Google</h1>
<p>Welcome to Google</p>
</div>
<div ng-switch-when="taobao">
<h1>Taobao</h1>
<p>Welcome to Taobao</p>
</div>
<div ng-switch-default>
<h1>Switch</h1>
<p>Select different options to display corresponding values.</p>
</div>
</div>
Definition and Usage
The ng-switch directive shows or hides the corresponding sections based on the expression.
Corresponding child elements use the ng-switch-when directive, which displays if matched, and removes others that are not matched.
You can set a default option using the ng-switch-default directive, which will be displayed if none of the cases match.
Syntax
The attribute is supported by <form> elements.
Parameter Values
| Value | Description |
|---|---|
| expression | The expression causes matching items to be displayed and non-matching items to be removed. |