Google News
logo
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 :