AngularJS ng-switch Directive
The AngularJS ng-switch directive facilitates you to hide/show HTML elements according to 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.
If you want to define a default section you can use ng-switch-default directive.
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>
Parameter explanation:
expression: It specifies an expression that will remove elements with no match, and display elements with a match.
Let's take an example to demonstrate the usage of ng-swith directive.
See this example:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="">
Choose your favorite topic:
<select ng-model="myVar">
<option value="animals">Zoology
<option value="tuts">Tutorials
<option value="cars">Cars
<option value="bikes">Bikes
</select>
<hr>
<div ng-switch="myVar">
<div ng-switch-when="animals">
<h1>Zoology</h1>
<p>Welcome to a world of zoology.</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-when="bikes">
<h1>Cars</h1>
<p>Read about bikes.</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>
<hr>
<p>The ng-switch directive hides and shows HTML sections depending on a certain value.</p>
</body>
</html>
