AngularJS | ng-switch Directive

Last Updated : 28 Mar, 2019

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

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

<!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="" style=""> 
    <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:

Before Click on the radio button:
After Clicking the Searching radio button:
After Clicking the Sorting radio button:

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

<!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 style="">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:

Before Input the text:
After Input the text:

My Personal Notes

Related Articles