Post
Ask Question

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


Similar Articles