The Document Object Model (DOM) is basically a cross-platform and language-independent convention used for representation and interaction between objects in HTML, XHTML and XML documents. The DOM tree is nothing but the nodes of every document organized in a tree structure.
AngularJS has various directives which can be used to bind application data to the attributes of the HTML DOM elements.
The ng-disabled directive helps in the binding of application data in AngularJS with the disabled attribute of the HTML elements. In the following example the ng-disabled attribute has been added to a HTML button and a model is passed. Then, the model is bound to a checkbox and the output is obtained.
<input type = "checkbox" ng-model = "enableDisableButton">Disable Button button ng-disabled = "enableDisableButton">Click Me!</button>
The ng-show directive helps in showing or hiding an HTML element based on the value of ng-show. In the following example the ng-show attribute has been added to a HTML button and a model is passed. Then, the model is bound to a checkbox and the output is obtained.
<input type = "checkbox" ng-model = "showHide1">Show Button button ng-show = "showHide1">Click Me!</button>
The ng-hide directive helps in hiding or showing an HTML element based on the value of the directive. In the following example the ng-hide attribute has been added to a HTML button and a model is passed. Then, the model is bound to a checkbox and the output is obtained.
<input type = "checkbox" ng-model = "showHide2">Hide Button <button ng-hide = "showHide2">Click Me!</button>
The ng-click directive represents a click event in AngularJS. In the following example the ng-click attribute has been added to a HTML button and a model is updated. Then, the model is bound to the HTML and the output is obtained.
<p>Total click: {{ clickCounter }}</p> lt;button ng-click = "clickCounter = clickCounter + 1">Click Me!</button>
The following example uses all the above mentioned directives.
<!DOCTYPE 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 = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> </body> </html>