AngularJS ng-if and else

We show here how to achieve if-else 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}}:
        <input type="number" min="0" max="24" ng-model="time" />
    </label>
    <div ng-if="time >= 4 && time < 12" class="green"> Good morning!</div>
    <div ng-if="!(time >= 4 && time < 12)" class="red">So sad, You missed morning </div>
</div>
<p><font color="red" size="2px">Try to enter hours between 4 to 12 and then any other value </font></p>

CSS

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

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

.note {
    text-color: red;
    text-size: 15px;
}

JavaScript

var app = angular.module('myApp', []);
app.controller('MyController', ['$scope', function($scope) {
    $scope.title = 'Enter hours in the 24 hr format ';
    var d = new Date();
    $scope.time = d.getHours();
}]);