AngularJS ng-switch Directive
Example
Show a section of HTML, only if it matches a certain value:
<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>
Try it Yourself »
Definition and Usage
The ng-switch directive lets you hide/show HTML elements
depending on an expression.
Child elements with the ng-switch-when directive will be
displayed if it gets a match, otherwise the element, and its children will be
removed.
You can also define a default section, by using the ng-switch-default
directive, to show a section if none of the other sections get a match.
Syntax
<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>
Supported by all HTML elements.
Parameter Values
| Value | Description |
|---|---|
| expression | An expression that will remove elements with no match, and display elements with a match. |
