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