AngularJS ng-if Directive Example – Show or Hide HTML Element using ng-if based on jQuery Datepicker Selection

The ng-if directive, as you know, is a built-in AngularJS directive that removes or recreates HTML elements from the DOM. It is useful when you want to hide or show elements based on certain condition. Here in this post, I’ll show how to show or hide HTML element, like a textbox, based on jQuery Datepicker selection using AngularJS ng-if directive.

AngularJS ng-if Syntax

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.

See this demo

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.

The Markup

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 …

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

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>

See this demo

Conclusion

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.

← PreviousNext →