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!