AngularJS ng-switch

We show here how to use switch case in angularjs

by Varun Sukheja

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<div ng-controller='MyController' ng-app="myApp">
    <label> {{title}}: 
	<br>
        <input type="number" min="0" max="24" ng-model="myNum" />
    </label>
    <div ng-switch="myNum">
    <div ng-switch-when="1" class="magenta">you entered 1st</div>
    <div ng-switch-when="2" class="skyblue ">you entered 2nd</div>
	    <div ng-switch-when="3" class="green">your entered 3rd</div>
    
    <div ng-switch-default class="red">You entered wrong number try to enter 1, 2 or 3</div>
  </div>
	
	
	
	
</div>

CSS

.red {
background-color: red; text-align: center;
}

.green {
background-color: green; text-align: center;
}

.skyblue  {
background-color: SkyBlue ; text-align: center;
}

.magenta {
 background-color: magenta; text-align: center;
}

JavaScript

var app = angular.module('myApp', []);
app.controller('MyController', ['$scope', function($scope) {
    $scope.title = 'Try to enter number between 1 to 3 and then enter any other value ';
    var d = new Date();
    $scope.time = d.getHours();
}]);