Skip to content
Related Articles

Related Articles

AngularJS ng-switch Directive

Improve Article
Save Article
  • Last Updated : 08 Aug, 2022
Improve Article
Save Article

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=
    </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=
    </script>
    <link rel="stylesheet" href=
</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:

 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!