AngularJS - HTML DOM

Quiz

The following directives are used to bind application data to the attributes of HTML DOM elements −

Sr.No.	Name & Description
1	ng-disabled disables a given control.
2	ng-show shows a given control.
3	ng-hide hides a given control.
4	ng-click represents a AngularJS click event.

ng-disabled Directive

Add ng-disabled attribute to an HTML button and pass it a model. Bind the model to a checkbox and see the variation.

Disable Button

ng-show Directive

Add ng-show attribute to an HTML button and pass it a model. Bind the model to a checkbox and see the variation.

Show Button

ng-hide Directive

Add ng-hide attribute to an HTML button and pass it a model. Bind the model to a checkbox and see the variation.

Hide Button

ng-click Directive

Add ng-click attribute to an HTML button and update a model. Bind the model to HTML and see the variation.

Total click: {{ clickCounter }}

Example

The following example shows use of all the above mentioned directives.

testAngularJS.htm


   
      AngularJS HTML DOM
   
   
   
      AngularJS Sample Application
      
      
         
            
               Disable Button
               
            
            
               Show Button
               
            
            
               Hide Button
               
            
            
               Total click: {{ clickCounter }}

Output

Open the file testAngularJS.htm in a web browser and see the result.

Print Page