HomeEducationAngularJS ng-if Directive Instance – Present or Cover HTML Aspect utilizing ng-if...

AngularJS ng-if Directive Instance – Present or Cover HTML Aspect utilizing ng-if based mostly on jQuery Datepicker Choice Receive US

The ng-if directive, as you recognize, is a built-in AngularJS directive that removes or recreates HTML parts from the DOM. It’s helpful once you need to disguise or present parts based mostly on sure situation. Right here on this submit, I’ll present the right way to present or disguise HTML ingredient, like a textbox, based mostly on jQuery Datepicker choice utilizing AngularJS ng-if directive.

AngularJS ng-if Syntax

&ltelement ng-if= “expression”> &lt/ingredient>

The ng-if directive evaluates an expression based mostly on true or false. If the expression evaluates to false it might take away the ingredient from the DOM. In case the expression is true, it’ll recreate the ingredient.

See this demo

Why I select jQuery Datepicker for an instance? I used to be engaged on a mission lately, and I got here throughout a state of affairs the place I had few HTML parts like a &ltp>, an &ltinput> ingredient with different parts. I needed to indicate or disguise the &ltinput> field (inside a &ltp> ingredient) after I choose a date from the Datepicker. The &ltinput> field stays hidden by default. Once I take away the date, it might routinely disguise or take away the &ltinput> field. So, that the situation.

add jQuery UI Datepicker inside an HTML desk in your AngularJS utility

Let’s see how that is finished.

The Markup

Since I’m utilizing jQuery Datepicker widget in my instance, I’ll add the Datepicker library (the CDN) within the &lthead> part, earlier than AngularJS library (CDN).

&lt!DOCTYPE html>
    &ltlink rel="stylesheet" href="
    &ltscript src="
    &ltscript src="

    &ltscript src="
    &ltdiv ng-app="myApp" 

            &ltinput sort="textual content" id="date" datepicker ng-model="datevalue" 
                placeholder="Choose a date" />
        &ltp ng-if="datevalue">
            &ltinput sort="textual content" placeholder="Enter some worth" />

I’ve an &ltinput> field with the attribute datepicker. I’ll add a directive within the &ltscript> part that may add the Datepicker to the &ltinput> field. The ng-if checks if the ng-model datevalue is true of false. True if a date is chosen and false when you take away the date.

Now, what’s fascinating is to see which ingredient I’ve added the ng-if directive. Within the instance above, the ng-if directive is within the &ltp> ingredient. You may have included the directive to the &ltinput> field itself, like this …

&ltinput sort=”textual content” placeholder=”Enter some worth” ng-if= “datevalue” />

That is okay when you simply need to take away or recreate the &ltinput> field alone. Nonetheless, you could have different parts similar to a submit button or a label and many others. that sits in a container and are associated, functionally. On this case, you’ll have to add the ng-if directive to the container, like above instance.

&ltp ng-if="datevalue">
    &ltinput sort="textual content" placeholder="Enter some worth" />

The Script

The script simply has a directive so as to add the jQuery Datepicker to the mannequin.

    var myApp = angular.module('myApp', []);
        perform ($scope) );

    myApp.directive("datepicker", perform () {
        perform hyperlink(scope, ingredient, attrs, controller) 
                onSelect: perform (dt) 
                    scope.$apply(perform () 
                dateFormat: "dd/mm/yy"
        return  require: 'ngModel', hyperlink: hyperlink ;

See this demo


The AngularJS ng-if directive works on many different HTML parts, like a button, &ltdiv>, hyperlinks and many others. Its main perform is to indicate or disguise parts as and when required. I discovered this directive fascinating given that you do have to make use of the onchange occasion.

Within the above instance, the textbox or the &ltp> parts present or disguise when the worth (the date) adjustments. Often, the very first thing that may have come to your thoughts could be to make use of the onchange occasion. With AngularJS, simply use ng-if directive.

Properly, that’s it. Thanks for studying.

← EarlierSubsequent →

#AngularJS #ngif #Directive #Present #Cover #HTML #Aspect #ngif #based mostly #jQuery #Datepicker #Choice

Continue to the category


Please enter your comment!
Please enter your name here

- Advertisment -spot_img

Most Popular

Recent Comments