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.