As a good programmer you need to know the advantages of using Switch Case in place of If and Else. Modern Programming languages compiles switch case more faster than if & else. During application development using switch case we can achieve better performance for Conditional statements. It’s no matter if you are using if & else for 4 to 5 conditional statements. But in-case you are handling more then 4 to 5 Conditional statements to Compare values in such case prefer to use Switch Case in AngularJS in place of if and else.
In the below example I am showing how to use AngularJS Switch Case. Look at the Codes below. Here inside the Controller I declared an options object to the $Scope. Options array contains six items. In html body I have a dropdownlist which shows me the list of values from this options array. Depending upon the selected value from dropdownlist I am showing a div with appropriate message. In the primary div of switch cases messages I am using ng-switch on=”selection” to instruct on which values switch case will occur. Here “selection” is my ng-model. Which is declared in my select control. To check each case from options array I am using ng-switch-when & for default value like ‘Others’ from options array I am using ng-switch-default to show the default massage.
To run the below example copy the codes to a Notepad file. Save it as a html File. Then open the HTML file with internet Connectivity. This demo app contains CDN links. Without Internet this will not work.
Switch Case in AngularJS Example
<!DOCTYPE html>
<html>
<head>
<title>How to use Switch Case in AngularJS?</title>
<!--AngularJS CDN Link-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script type="text/javascript">
(function(angular) {
angular.module('modSwitch', [])
.controller('ControllerSwitch', ['$scope', function($scope) {
$scope.options = ['Blog', 'Business', 'Fashion', 'Career', 'Education', 'Others'];
$scope.selection = $scope.options[0];
}]);
})(window.angular);
</script>
</head>
<body ng-app="modSwitch">
<div ng-controller="ControllerSwitch">
<select ng-model="selection" ng-options="item for item in options">
</select>
<hr/>
<div ng-switch on="selection">
<div ng-switch-when="Blog">Blog is a Business.</div>
<div ng-switch-when="Business">Business is a Busy Game.</div>
<div ng-switch-when="Fashion">Fashion updates Everyday.</div>
<div ng-switch-when="Career">Career is Like a Ladder.</div>
<div ng-switch-when="Education">Education Never Ends.</div>
<div ng-switch-default>This is the Default value for Switch Case.</div>
</div>
</div>
</body>
</html>
