Angularjs HTML Dom Detailed and sample code _ANGULARJS

The following directives can be used for properties that application data binds to HTML DOM elements.

s.no.	name	Description
1	Ng-disabled	Disables a given control
2	Ng-show	Display a given control
3	Ng-hide	Hidden in a given control
4	Ng-click	Represents the Angularjs Click event

ng-disabled directives

Add the Ng-disabled property to an HTML button through its model. The model is bound to a check box to see the following changes.

<input type= "checkbox" ng-model= "Enabledisablebutton" >disable button
<button ng-disabled= " Enabledisablebutton ">click me!</button>

Ng-show directives

Add the Ng-show property to an HTML button and pass it to the model. Bind the model to the check box to see the following changes.

<input type= "checkbox" ng-model= "showHide1" >show button
<button ng-show= "ShowHide1" >click me!</ Button>

Ng-hide directives

Add the Ng-hide property to the HTML button through its model. Bind the model to the check box to see the following changes.

<input type= "checkbox" ng-model= "ShowHide2" >hide button
<button ng-hide= "ShowHide2" >click me!</ Button>

Ng-click directives

Add the Ng-click property to the HTML button and update the model. Model bound HTML to see the combination of changes.

<p>total click: {{clickcounter}}</p></td>
<button ng-click= ' clickcounter = clickCounter + 1 ' >click me!</button>

Example

The following example shows all of the above instructions.

Testangularjs.html