AngularJS ng-switch Directive

Last Updated : 08 Aug, 2022

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>