AngularJS | ng-switch Directive - GeeksforGeeks

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:
AngularJS-Directives
AngularJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Angular PrimeNG Dropdown Component
Auth Guards in Angular 9/10/11
Angular PrimeNG Calendar Component
What is AOT and JIT Compiler in Angular ?
How to bundle an Angular app for production?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills