AngularJS ng-if

In this example, we do a very simple AngularJS ng-if example.

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>
<p><font color="red" size="2px">Try to enter hours between 4 to 12</font></p>

CSS

.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();
}]);