Hello folks! welcome back to a new section of our tutorial on AngularJS. In this tutorial, we will be studying about AngularJS HTML DOM.
The following directives below are used for binding application data to the attributes of HTML DOM elements -
The following directives below are used for binding application data to the attributes of HTML DOM elements -
| Sr.No. | Name & Description |
|---|---|
| 1 | ng-disabled disables a given control. |
| 2 | ng-show shows a given control. |
| 3 | ng-hide hides a given control. |
| 4 | ng-click represents a AngularJS click event. |
ng-disabled Directive
Insert the ng-disabled directive to an HTML button and pass it a model. Bind the model to a checkbox and see the variation.
<input type = "checkbox" ng-model = "enableDisableButton">Disable Button <button ng-disabled = "enableDisableButton">Click Me!</button>
ng-show Directive
Insert ng-show directive to an HTML button and then pass it a model. Bind the model to a checkbox and see the variation.
<input type = "checkbox" ng-model = "showHide1">Show Button <button ng-show = "showHide1">Click Me!</button>
READ: AngularJS | Tables
ng-hide Directive
Insert ng-hide directive to an HTML button and then pass it a model. Bind the model to a checkbox and see the variation.
<input type = "checkbox" ng-model = "showHide2">Hide Button <button ng-hide = "showHide2">Click Me!</button>
ng-click Directive
Insert ng-click directive to an HTML button and then pass it a model. Bind the model to HTML and see the variation.
<p>Total click: {{ clickCounter }}</p>
<button ng-click = "clickCounter = clickCounter + 1">Click Me!</button>
Example
The following example illustrates the use of all the above mentioned directives -
Create a file testAngularJS.html.
Create a file testAngularJS.html.
<html> <head> <title>AngularJS HTML DOM</title> </head> <body> <h2>AngularJS Sample Application</h2> <div ng-app = ""> <table border = "0"> <tr> <td><input type = "checkbox" ng-model = "enableDisableButton">Disable Button</td> <td><button ng-disabled = "enableDisableButton">Click Me!</button></td> </tr> <tr> <td><input type = "checkbox" ng-model = "showHide1">Show Button</td> <td><button ng-show = "showHide1">Click Me!</button></td> </tr> <tr> <td><input type = "checkbox" ng-model = "showHide2">Hide Button</td> <td><button ng-hide = "showHide2">Click Me!</button></td> </tr> <tr> <td><p>Total click: {{ clickCounter }}</p></td> <td><button ng-click = "clickCounter = clickCounter + 1">Click Me!</button></td> </tr> </table> </div> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> </script> </body> </html>
Output
Open the file testAngularJS.html in any web browser and you will see the result -
AngularJS Sample Application
| Disable Button | |
| Show Button | |
| Hide Button | |
Total click: |
READ: AngularJS | Filters
Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial, we are going to be studying about AngularJS Modules.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.