Introduction
In my previous articles I told you about:
This article explains the ng-Switch directive of AngularJS.
ng-switch can be used to swap things; it uses two or more directives in it that are ng-switch-when and ng-switch-default, if these are not used then whatever you have provided in the scope will be provided as-is and not on the selection made. Values that are provided in the scope can be swapped using ng-switch.
Step 1
First of all you need to add an external Angular.js file to your application, in other words "angular.min.js".
For this you can go to the AngularJS official site or download my source code and then fetch it or you can click on this link and download it: ANGULARJS.
After downloading the external file you need to add this file to the Head section of your application.
<head runat="server">
<title></title>
<script src="angular.min.js"></script>
</head>
Step 2
Now after adding the external JS file the first thing you need to do is to add ng-app in the <HTML> Tag otherwise your application will not run.
<html ng-app xmlns="http://www.w3.org/1999/xhtml">
Now I will create a simple application where this directive along with it's supporting directives will be used.
First I will create a JavaScript function in which some values are to be passed that will be swapped by our directive. For that you need to add this code in the head section of your application:
<script>
function func($scope) {
$scope.div = ['div1', 'div2', 'div3'];
$scope.selectedDiv = $scope.div[0];
}
</script>
Here I have created a function in which some initial values are passed, first the value is selected as the default value using the div[0].
Step 3
Now I will work on the ViewModel of this application.
<div ng-controller="func">
<select ng-model="selectedDiv" ng-options="item for item in div">
</select>
<tt>You Selected={{selectedDiv}}</tt>
<hr/>
<div class="animate-switch-container" ng-switch on="selectedDiv">
<div style="border:1px solid black" ng-switch-when="div1">First Div</div>
<div style="border:1px solid black" ng-switch-when="div2">Second Div</div>
<div style="border:1px solid black" ng-switch-default>Default Div or Third Div</div>
</div>
Here I have created a parent div that is bound to the controller using the ng-controller, then selectedDiv is bound to the drop down list using the ng-model.
Then I have created a Div in which three Divs are available, this parent div is bound to the ng-switch, here switching is started and will be displayed here. Next three Divs are bound using ng-switch-when and ng-switch-default. The Div that are bound to ng-switch-when will be displayed only when the corresponding text is selected from the Drop Down List and Default will be displayed by default on running the application.
Now our application is created and can be executed.
Output
On running the application you will see that first the Div is selected by default in the Drop Down and corresponding Text is shown below it.
![ng-switch directive]()
Now if I click on the Drop Down then all three Divs will be shown in it.
![ng-switch directive]()
Now as I select the other Div, the corresponding text will again be shown below it.
![ng-switch directive]()
The complete code of this application is as follows:
<html ng-app xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="angular.min.js"></script>
<script>
function func($scope) {
$scope.div = ['div1', 'div2', 'div3'];
$scope.selectedDiv = $scope.div[0];
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div ng-controller="func">
<select ng-model="selectedDiv" ng-options="item for item in div">
</select>
<tt>You Selected={{selectedDiv}}</tt>
<hr/>
<div class="animate-switch-container" ng-switch on="selectedDiv">
<div style="border:1px solid black" ng-switch-when="div1">First Div</div>
<div style="border:1px solid black" ng-switch-when="div2">Second Div</div>
<div style="border:1px solid black" ng-switch-default>Default Div or Third Div</div>
</div>
</form>
</body>
</html>