Prev Page
Next Page  
AngularJS HTML DOM
The AngularJS has directives can be used to binding application data to the attributes of HTML DOM elements. The following HTML DOM Directives are :
Name Description
ng-disabled disables a given control.
ng-show shows a given control.
ng-hide hides a given control.
ng-click Represents a AngularJS click event.
ng-disabled directive
The ng-disabled directive binds the application data to the disabled attribute HTML elements. The ng-model directive binds the value of the HTML checkbox element to the value of mySwitch. 
<input type="checkbox" ng-model="enableDisableButton">Disable Button  
<button ng-disabled="enableDisableButton">Click Here!</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 and see the variation.
<input type="checkbox" ng-model="show">Show Button  
<button ng-show="show">Click Here!</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. 
<input type="checkbox" ng-model="Hide">Hide Button  
<button ng-hide="Hide">Click Here!</button>
ng-click directive
Add ng-click directive counts the total clicks an HTML element. Bind the model to html and see the variation.
<p>Total click : {{ clickCounter }}</p>
<button ng-click="clickCounter=clickCounter + 1">Click Here!</button>
HTML DOM Example :
<!DOCTYPE html>  
<html> 
<head>
<title>AngularJS HTML DOM</title>
<script type="text/javascript" src="js/angular.min.js"></script>  
</head>
 
 <body>
      <h3>HTML DOM Sample Application</h3>
      <div ng-app="">
         <table border="0">
            <tr>
               <td><input type="checkbox" ng-model="enableDisableButton">Disable Button</td>
               <td><button ng-disabled="enableDisableButton">Click Here!</button></td>
            </tr>
            
            <tr>
               <td><input type="checkbox" ng-model="show">Show Button</td>
               <td><button ng-show = "show">Click Here!</button></td>
            </tr>
            
            <tr>
               <td><input type="checkbox" ng-model="Hide">Hide Button</td>
               <td><button ng-hide="Hide">Click Here!</button></td>
            </tr>
            
            <tr>
               <td><p>Total clicks : {{ clickCounter }}</p></td>
               <td><button ng-click="clickCounter=clickCounter + 1">Click Here!</button></td>
            </tr>
         </table>
         
      </div>  
      
   </body>
</html>
Output :
  Prev Page
Next Page