HTML DOM element in AngularJS

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

1. ng-disabled: Disabling a control (control) provided
2. ng-show: Displays a control provided
3. ng-hide: Hide a control provided
4. 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 example

Here is an example for the description mentioned above.

phantuHTMLDOM.html

 HTML DOM trong AngularJS 

For example

 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!