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 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;" >w3wiki</ 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;" >w3wiki</ 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: