AngularJS | ng-switch Directive

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
      
<head>
    <title>ng-switch Directive</title>
      
    <script src=
    </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>                    

chevron_right


Output:

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

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>ng-switch Directive</title>
      
    <script src=
    </script>
      
    <link rel="stylesheet" href=
</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>                    

chevron_right


Output:

  • Before Input the text:
    ngswitch
  • After Input the text:
    ngswitch


My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.