Angularjs HTML DOM tutorial

by

AngularJS DOM:

AngularJS provides the inbuilt directives for binding application data to the attributes of HTML DOM elements.

Name Description
ng-disabled It is used to disable a given control.
ng-show It is used to show a given control.
ng-hide It is used to hide a given control.
ng-click It represents an AngularJS click event.

Example Explanation:

First include the AngularJS library in the application. The ng-app directive initializes the application. For first button we add ng-disabled attribute to a HTML button and pass it a model. Bind the model to a checkbox. When you click on checkbox corresponding value will be updated in button’s ng-disabled attribute through enableDisableButton model value and the button will enable or disable based on it. Same process will follow for other buttons.

Example:

<!DOCTYPE html>
<html>
<script 
 src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<body>
<h1>AngularJS HTML DOM Example.</h1>
<div ng-app = "">         
         <table>
            <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>
 
</body>
</html>

Try it:

JS Bin on jsbin.com