Ng-disabled Directive in Angularjs: HTML DOM Element in Angularjs

The following AngularJS directives can help bind application data to attributes in the HTML DOM element.

• ng-disabled: Disabling a control (control) provided
• ng-show: Displays a control provided
• ng-hide: Hide a control provided
• ng-click: Performing a click event in AngularJS

Ng-disabled Directive in AngularJS

Add ng-disable attribute to an HTML button and attach this data to the model. Mount the model to a checkbox to observe the change.

 type = "checkbox" ng-model = "enableDisableButton" > Disable button  ng-disabled = "vohieuhoakichhoatnut" > Nhan vao day! 

Ng-show Directive in AngularJS

Add the ng-show attribute to the HTML button and attach it to the model. Mount the model to a checkbox to observe the change.

 type = "checkbox" ng-model = "showHide1" > Show button  ng-show = "showHide1" > Click here! 

Ng-hide directive in AngularJS

Add ng-hide attribute to the HTML button and attach it to the model. Mount the model to a checkbox to observe the change.

 type = "checkbox" ng-model = "showHide2" > Hide the button  ng-show = "showHide1" > Click here! 

Ng-click directives in AngularJS

Add the ng-click attribute to the HTML Button and attach it to the model. Mount the model to hmtl to observe the change.

 Total clicks: {{clickCounter}}  ng-click = "clickCounter = clickCounter + 1" > Click here! 

For instance,

Here is an example for the description mentioned above.

phantuHTMLDOM.html

 HTML DOM trong AngularJS 

For instance,

 AngularJS QTM  ng-app = "" >  border = "0" >  type = "checkbox" ng-model = "enableDisableButton" > Vô hi?u hóa nút  ng-disabled = "enableDisableButton" > Nh?p vào ?ây!  type = "checkbox" ng-model = "showHide1" > Hi?n nút  ng-show = "showHide1" > Nh?p vào ?ây!  type = "checkbox" ng-model = "showHide2" >?n nút  ng-hide = "showHide2" > Nh?p vào ?ây! 

 T?ng s? l?n nh?p: {{ clickCounter }}  ng-click = "clickCounter = clickCounter + 1" > Nh?p vào ?ây!