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:
Contents... Contents... Contents...
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>
<head>
<title>ng-switch Directivetitle>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js">
script>
head>
<body ng-app="">
<h1 style="color:green;">GeeksforGeeksh1>
<h2>ng-switch Directiveh2>
<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 Algorithmsh2>
<ul>
<li>Binary Search
<li>Linear Search
ul>
div>
<div ng-switch-when="sort">
<h2>Sorting Algorithmsh2>
<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>
<head>
<title>ng-switch Directivetitle>
<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;">GeeksforGeeksh1>
<h2>ng-switch Directiveh2>
<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:
