AngularJS – HTML DOM

In AngularJS, DOM stands for Document Object Model. In AngularJS, all directives are used to bind application data to the attributes of HTML DOM elements. 4 types of directives are used to bind application data. They are:

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 AngularJS click event.

ng-disabled Directive

In angularjs the ng-disabled directories helps to disabled attributes of an HTML elements.
Add the ng-disabled attribute to a HTML buttton and pass it to a model.
In the below code will explain how to binds a model to a checkbox.

Disable Button  
button ng-disabled = "enableDisableButton">Click Me!  



From the above example; the ng-disabled directive binds the application data Switching to the HTML button’s disabled attribute.
The ng-model directive binds the value of the HTML checkbox element to the value of Switching.
If the value of Switching evaluates to true, the button will be disabled and the value of Switching evaluates to false, the button will we enabled.

ng-show Directive

The ng-show directives helps to show or hide the HTML attributes.
Their are two types of attribute like true and false the ng-show directives pass.
If pass true, element in ng-show directives element will be visible and pass false attribute in ng-show directives, element will be hide.
In the below code, it binds a model to a checkbox.

	Show Button  
	button ng-show = "showHide1">Click Me!   


I am visible element.
I am not visible element.

ng-hide Directive

In AngularJS, the ng-hide directive shows or hides an HTML element.


I am not visible.
I am visible.

ng-click directive

The ng-click directives helps to count the total click in HTML elements. It represents a AngularJS click event.

Leave a Reply

Your email address will not be published. Required fields are marked *