AngularJS HTML DOM

AngularJS DOM with examples on mvc, expression, directive, controller, module, scope, filter, dom, form, ajax, validation, services, animation, dependency injection and more.

AngularJS HTML DOM

AngularJS HTML DOM

In AngularJS, some directives can be used to bind application data to attributes of HTML DOM elements.

These directives are:

Directive Description
ng-disabled It disables a given control.
ng-show It shows a given control.
ng-hide It hides a given control.
ng-click It represents an AangularJS click event.

ng-disabled directive: The ng-disabled directive binds AngularJS application data to the disabled attribute of HTML elements. In the below code, it binds a model to a checkbox.

  1. <input type = "checkbox" ng-model = "enableDisableButton">Disable Button  
  2. button ng-disabled = "enableDisableButton">Click Me!</button>  

ng-show directive: The ng-show directive shows or hides an HTML element. In the below code, it binds a model to a checkbox.

  1. <input type = "checkbox" ng-model = "showHide1">Show Button  
  2. button ng-show = "showHide1">Click Me!</button>   

ng-hide directive: The ng-hide directive hides or shows an HTML element. In the below code, it binds a model to a checkbox.

  1. <input type = "checkbox" ng-model = "showHide2">Hide Button  
  2. <button ng-hide = "showHide2">Click Me!</button>   

ng-click directive: The ng-click directive counts the total clicks an HTML element. In the below code, it binds a model to a checkbox.

  1. <p>Total click: {{ clickCounter }}</p>  
  2. lt;button ng-click = "clickCounter = clickCounter + 1">Click Me!</button>   

Let's take an example to deploy the all above directives and test the variations:

See this example:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.       <title>AngularJS HTML DOM</title>  
  5. </head>  
  6. <body>  
  7.       <h2>AngularJS Sample Application</h2>  
  8.       <div ng-app = "">  
  9.            <table border = "0">  
  10.             <tr>  
  11.                <td><input type = "checkbox" ng-model = "enableDisableButton">Disable Button</td>  
  12.                <td><button ng-disabled = "enableDisableButton">Click Me!</button></td>  
  13.             </tr>  
  14.             <tr>  
  15.                <td><input type = "checkbox" ng-model = "showHide1">Show Button</td>  
  16.                <td><button ng-show = "showHide1">Click Me!</button></td>  
  17.             </tr>  
  18.              <tr>  
  19.                <td><input type = "checkbox" ng-model = "showHide2">Hide Button</td>  
  20.                <td><button ng-hide = "showHide2">Click Me!</button></td>  
  21.             </tr>  
  22.              <tr>  
  23.                <td><p>Total click: {{ clickCounter }}</p></td>  
  24.                <td><button ng-click = "clickCounter = clickCounter + 1">Click Me!</button></td>  
  25.             </tr>  
  26.          </table>  
  27.          </div>  
  28. <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>  
  29. </body>  
  30. </html>