In the below code I have created a drop down list consisting of three different sizes. On clicking a particular size it will display that size div along with its name.
Here is the HTMl:
<html>
<head>
<title>Controller</title>
<link href="css/sizes1.css" rel="stylesheet">
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/sizes.js"></script>
</head>
<body ng-app="mainApp">
<div class="wrapper">
<div ng-controller="mycontroller">
<h3 id="head"> Sample Application</h3>
<div>
<form>
<p> <select ng-model="myselect" ng-options="o as o for o in options"
class="optionbox"></select></p>
<p id="para">{{myselect}}</p>
<div class="animate-switch-container" ng-switch on="myselect">
<div class="animate-switch1" ng-switch-when="small">SMALL SIZE</div>
<div class="animate-switch2" ng-switch-when="big">BIG SIZE</div>
<div class="animate-switch3" ng-switch-when="bigger">BIGGER SIZE</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
I have created drop down list using angular directive ng-options. And then using ng-switch-on and ng-switch-when it is switching among the three sizes according to the name clicked or selected.
Here is the js code you need to include.
var app = angular.module('mainApp', []);
app.controller('mycontroller', function($scope) {
$scope.options = ['small', 'big', 'bigger'];
$scope.myselect = $scope.options[0];
});
0 Comment(s)