Contribute
Angular

Learning AngularJS: HTML DOM

Introduction

Hi all, I hope you are fine. Today we will learn about Angular JS HTML DOM elements. If you are new to Angular JS then I suggest you read the basics of Angular JS here:

Using the code

The ng-disabled directive normally binds the data to the disabled property of our HTML elements. The following is the example for that.

  1. <b>ng-disabled</b>  
  2. <div ng-app="">  
  3.    <p>  
  4.       <input type="checkbox" ng-model="myVal" />Please enable me  
  5.    </p>  
  6.    <p>  
  7.       <button ng-disabled="!myVal ">Wow! You enabled me :)</button>  
  8.    </p>  
  9. </div>  

Here we have a model that is a check box. What we do is, whenever a user clicks that checkbox we are applying that value to the ng-disabled property of the button. Please see the following output.



Now we will explain ng-show.

The ng-show shows or hides the HTML controls depending on the ng-show value.

Please see the following example.

  1. <b>ng-show</b>  
  2. <p>  
  3.       <input type="checkbox" ng-model="showhide" />Please show me  
  4. </p>  
  5. <p ng-show="showhide">Am I visible? {{showhide}}</p>  

In the preceding example we are taking the value from the model showhide and applying to the ng-show.

Please see the output below.



You can apply any expression also. We will discuss that in the following example.

  1. <b>ng-show-Conditional expressions</b>  
  2. <div ng-init="isAdmin=true">  
  3.        <p ng-show="isAdmin == true">Admin User</p>  
  4. </div>  

The preceding will show the output as:



ng-hide

The ng-hide directive is the same as the ng-show:

  1. <b>ng-hide</b>  
  2. <p ng-hide="true">Not visible.</p>  
  3. <p ng-hide="false">Visible.</p>  

In the preceding example we are applying the ng-hide value directly. We can use the ng-model for the same as we discussed in the preceding examples.

This will return the output as follows.



Complete HTML

  1. <!DOCTYPE html>  
  2. <html  
  3.     xmlns="http://www.w3.org/1999/xhtml">  
  4.     <head>  
  5.         <title>Angular JS HTML Dom - www.SibeeshPassion.com</title>  
  6.         <script src="angular.min.js"></script>  
  7.     </head>  
  8.     <body>  
  9.         <b>ng-disabled</b>  
  10.         <div ng-app="">  
  11.             <p>  
  12.                 <input type="checkbox" ng-model=" myVal " />Please enable me  
  13.             </p>  
  14.             <p>  
  15.                 <button ng-disabled="!myVal ">Wow! You enabled me :)</button>  
  16.             </p>  
  17.             <b>ng-show</b>  
  18.             <p>  
  19.                 <input type="checkbox" ng-model="showhide" />Please show me  
  20.             </p>  
  21.             <p ng-show="showhide">Am I visible? {{showhide}}</p>  
  22.             <b>ng-show-Conditional expressions</b>  
  23.             <div ng-init="isAdmin=true">  
  24.                 <p ng-show="isAdmin == true">Admin User</p>  
  25.             </div>  
  26.             <b>ng-hide</b>  
  27.             <p ng-hide="true">Not visible.</p>  
  28.             <p ng-hide="false">Visible.</p>  
  29.         </div>  
  30.     </body>  
  31. </html>  
Conclusion

Now that is all for today, I will return with another set of items in Angular JS soon. I hope you liked this article. Please provide your valuable suggestions.

Kindest Regards,

Sibeesh venu
Sibeesh Passion

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs