AngularJS ng-if Syntax
<element ng-if= “expression”> </element>
The ng-if directive evaluates an expression based on true or false. If the expression evaluates to false it would remove the element from the DOM. In case the expression is true, it will recreate the element.
Why I choose jQuery Datepicker for an example? I was working on a project recently, and I came across a situation where I had few HTML elements like a <p>, an <input> element with other elements. I wanted to show or hide the <input> box (inside a <p> element) after I select a date from the Datepicker. The <input> box remains hidden by default. When I remove the date, it would automatically hide or remove the <input> box. So, that the condition.
👉 How to add jQuery UI Datepicker inside an HTML table in your AngularJS application 
Let’s see how this is done.
Since I am using jQuery Datepicker widget in my example, I’ll add the Datepicker library (the CDN) in the <head> section, before AngularJS library (CDN).
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp"
ng-controller="myController">
<p>
<input type="text" id="date" datepicker ng-model="datevalue"
placeholder="Select a date" />
</p>
<p ng-if="datevalue">
<input type="text" placeholder="Enter some value" />
</p>
</div>
</body>I have an <input> box with the attribute datepicker. I’ll add a directive in the <script> section that will add the Datepicker to the <input> box. The ng-if checks if the ng-model datevalue is true of false. True if a date is selected and false if you remove the date.
Now, what is interesting is to see which element I have added the ng-if directive. In the example above, the ng-if directive is in the <p> element. You could have included the directive to the <input> box itself, like this …
<input type="text" placeholder="Enter some value" ng-if= "datevalue" />
This is ok if you just want to remove or recreate the <input> box alone. However, you may have other elements such as a submit button or a label etc. that sits in a container and are related, functionally. In this case, you will have to add the ng-if directive to the container, like above example.
<p ng-if="datevalue">
<input type="text" placeholder="Enter some value" />
</p>The script just has a directive to add the jQuery Datepicker to the model.
<script>
var myApp = angular.module('myApp', []);
myApp.controller('myController',
function ($scope) {});
// DIRECTIVE FOR Datepicker.
myApp.directive("datepicker", function () {
function link(scope, element, attrs, controller) {
element.datepicker({
onSelect: function (dt) {
scope.$apply(function () {
controller.$setViewValue(dt);
});
},
dateFormat: "dd/mm/yy"
});
}
return { require: 'ngModel', link: link };
});
</script>
</html>The AngularJS ng-if directive works on many other HTML elements, like a button, <div>, links etc. Its primary function is to show or hide elements as and when required. I found this directive interesting for the reason that you do have to use the onchange event.
In the above example, the textbox or the <p> elements show or hide when the value (the date) changes. Usually, the first thing that would have come to your mind would be to use the onchange event. With AngularJS, just use ng-if directive.
Well, that’s it. Thanks for reading. ☺