AngularJS ng-switch Directive

by Online Tutorials Library July 22, 2022

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:

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:

     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js" id="ba489871fe4b1d39e04e5d8181d936d3" type="PenciLazyScript"></script>    Choose your favorite topic:  <select ng-model="myVar"><option value="animals">Zoology    </option><option value="tuts">Tutorials    </option><option value="cars">Cars    </option><option value="bikes">Bikes  </option></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>
<p>      </p>

Test it Now

Next TopicAngularJS ng-transclude Directive

AngularJS ng-switch Directive

AngularJS ng-switch Directive

PHP addcslashes() function

Framework7 Notifications

You may also like