top button
Flag Notify
    Connect to us
      Facebook Login
      Site Registration

Facebook Login
Site Registration

Explain ng-Switch Directive in AngularJS?

0 votes
Explain ng-Switch Directive in AngularJS?
posted Sep 11, 2017 by Jdk

Share this question
Facebook Share Button Twitter Share Button LinkedIn Share Button

1 Answer

0 votes

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.


<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>  

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>  
<script src=""></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  
<div ng-switch="myVar">  
  <div ng-switch-when="animals">  
     <p>Welcome to a world of zoology.</p>  
  <div ng-switch-when="tuts">  
     <p>Learn from examples.</p>  
  <div ng-switch-when="cars">  
     <p>Read about cars.</p>  
  <div ng-switch-when="bikes">  
     <p>Read about bikes.</p>  
  <div ng-switch-default>  
     <p>Select topic from the dropdown, to switch the content of this DIV.</p>  
<p>The ng-switch directive hides and shows HTML sections depending on a certain value.</p>  
answer Sep 18, 2017 by Shivaranjini
Contact Us
+91 9880187415
#280, 3rd floor, 5th Main
6th Sector, HSR Layout
Karnataka INDIA.