AngularJS HTML DOM

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 various directives are -

ng-disabled- this directive is used to disable a given control.
ng-show - this directive shows a given control.
ng-hide- this directive hides a given control.
ng-click- this directive is used to represent an AngularJS click event.

Now let us look at each of these directives in detail.

ng-disabled directive-

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>

ng-show directive-

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>

ng-hide directive-

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>

ng-click directive-

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>

AngularJS Tutorial

AngularJS Applications