My previous articles described:
This article describes the AngularJS ng-switch, ng-switch-when and ng-switch-default directives.
Description:
The ng-switch directive allows the user to insert and remove elements conditionally, from the DOM. it primarily swaps the DOM structure conditionally on the template based on a scope expression.
The following 3 AngularJS 3 directives are involved when we use ng-switch:
- ng-switch
- ng-switch-when
- ng-switch-default
Now I am describing all these directives as follows:
- ng-switch: This simply chooses one of the nested elements and makes it visible, the value that is visible is based on the evaluated expression's value. You can add this directive to a container element (like: div) and set the expression that acts as the selection condition. This is the same as a switch-case of other languages (like C, C++, Java, C# and so on), in these language various conditions are defined in the case statement but in the switch we define expressions associated with a case.
- ng-switch-when: This directive is the same as a case statement of other languages (like C, C++, Java, C# and so on). This is associated with every child element of the ng-switch, which element you want to include and remove from the DOM. There are many case conditions you can include with this.
- ng-switch-default: This directive is the same as the default statement of other languages (like C, C++, Java, C# and so on). When there are no matching conditions the ng-switch-when directive we use an alternative element, by default included with the DOM by using ng-switch-default.
You can use the ng-switch, ng-switch-when and ng-switch-default directive very simply as in the following:
<ANY ng-switch="expression">
<ANY ng-switch-when="matchValue1">...</ANY>
<ANY ng-switch-when="matchValue2">...</ANY>
<ANY ng-switch-default>...</ANY>
</ANY>
Now I will show you the step-by-step procedure to use ng-switch with the following example.
Step 1:
First of all you need to add an external "angular.min.js" file to your application, To add this file in your application you need to download the "angular.min.js" file from the official website of AngularJS (link is given as follows): AngularJS Official Wbsite.
<!DOCTYPE html>
<html>
<head>
<script src="angular.min.js"></script>
</head>
Step 2:
Now in the next step I am defining my conditional statements in the body section as follows:
<body ng-app>
<label>Type the number(1 to 5): <input type="text" ng-model="showNumber" /></label><br />
<!--ng-switch with expression (showNumber)-->
<div ng-switch="showNumber">
<!--Different Different case or ng-switch-when statements are as follows-->
<div ng-switch-when="1" style="width: 120px; background-color: red; text-align: center;"><b>Sourabh Somani</b></div>
<div ng-switch-when="2" style="width: 120px; background-color: green; text-align: center;"><b>Shaili Dashora</b></div>
<div ng-switch-when="3" style="width: 120px; background-color: yellow; text-align: center;"><b>Divya Sharma</b></div>
<div ng-switch-when="4" style="width: 120px; background-color: fuchsia; text-align: center;"><b>Swati Soni</b></div>
<div ng-switch-when="5" style="width: 120px; background-color: orange; text-align: center;"><b>Ayushi Patwa</b></div>
<!--Default statement defined by ng-switch-default is as follows-->
<div ng-switch-default style="width: 120px; background-color: lightgray; text-align: center;"><b>None</b></div>
</div>
</body>
</html>
Output:
When Page loads:
When Type 1 in Text Box:
When Type 2 in Text Box:
When Type 3 in Text Box:
When Type 4 in Text Box:
When Type 5 in Text Box:
When Type other then(1-5) in Text Box: