CodesJava

Easy learning with example program codes

Angularjs HTML DOM tutorial


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



Industrial Training

We offers Placement Oriented Training on Java, Spring, JSF, Hibernate, PHP, AngularJS, Angular 4, PLSQL, Oracle BI Publisher etc. We also provides Online training, please mail us at hr@codesjava.com.

Development

We also provides the Development services for Website Development , Java Development, PHP Development, Android App Development etc. You can contact us on hr@codesjava.com.

Copyright © 2019 CodesJava DMCA.com Protection Status SiteMap Reference: Java Wiki