THE WORLD'S LARGEST WEB DEVELOPER SITE

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.