Open In App

AngularJS ng-switch Directive

Last Updated : 28 Jul, 2025
Suggest changes
Share
Like Article
Like
Report

The ng-switch Directive in AngularJS is used to specify the condition to show/hide the child elements in HTML DOM. The HTML element will be displayed only if the expression inside the ng-switch directive returns true otherwise it will be hidden. It is supported by all HTML elements. 

Syntax:

<element ng-switch="expression"> <element ng-switch-when="value"> Contents... </element> <element ng-switch-when="value"> Contents... </element> <element ng-switch-default> Contents... </element> </element>

Parameter:

  • expression: It specifies the element has matched and will be displayed otherwise will be discarded.

Example 1: This example uses the ng-switch Directive to switch the element. 

HTML
<!DOCTYPE html> <html> <head> <title>ng-switch Directive</title> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js">  </script> </head> <body ng-app=""> <h1 style="color:green;">GeeksforGeeks</h1> <h2>ng-switch Directive</h2> <div> <form> <label> <input type="radio" value="search" ng-model="switch.Data"> Searching Algorithms </label> <label> <input type="radio" value="sort" ng-model="switch.Data"> Sorting Algorithms </label> </form> <div ng-switch="switch.Data" id="wrapper"> <div ng-switch-when="search"> <h2> Searching Algorithms</h2> <ul> <li>Binary Search <li>Linear Search </ul> </div> <div ng-switch-when="sort"> <h2>Sorting Algorithms</h2> <ul> <li>Merge Sort <li>Quick Sort </ul> </div> </div> </div> </body> </html> 

Output:

 

Example 2: This example uses the ng-switch Directive to display the entered number. 

HTML
<!DOCTYPE html> <html> <head> <title>ng-switch Directive</title> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js">  </script> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> </head> <body ng-app="" style="text-align:center;"> <h1 style="color:green;">GeeksforGeeks</h1> <h2>ng-switch Directive</h2> <div> <div class="col-md-3"> Type Number(1-2): <input ng-model="number" type="number" /> </div><br> <div ng-switch="number" class="col-md-3"> <div ng-switch-when="1" class="btn btn-danger"> You entered {{number}} </div> <div ng-switch-when="2" class="btn btn-primary"> You entered {{number}} </div> <div ng-switch-default class="well"> This is the default section. </div> </div> </div> </body> </html> 

Output:

 

Explore