The following directives can be used for application data binding to properties of HTML DOM elements.
| S.No. | name | describe |
|---|---|---|
| 1 | ng-disabled | Disable a given control |
| 2 | ng-show | Show a given control |
| 3 | ng-hide | Hide in the given control |
| 4 | ng-click | Indicates AngularJS click event |
ng-disabled command
Add the ng-disabled property to an HTML button through its model. The model is bound to the checkbox to see the following changes.
<input type="checkbox" ng-model="enableDisableButton">Disable Button<button ng-disabled="enableDisableButton">Click Me!</button>
ng-show command
Add the ng-show property to an HTML button and pass it on to the model. Bind the model to the check box and see the following changes.
<input type="checkbox" ng-model="showHide1">Show Button<button ng-show="showHide1">Click Me!</button>
ng-hide command
Add the ng-hide attribute as HTML button through its model. Bind the model to the check box and see the following changes.
<input type="checkbox" ng-model="showHide2">Hide Button<button ng-hide="showHide2">Click Me!</button>
ng-click command
Add the ng-click attribute as HTML button and update the model. Model binding HTML to see the changes in combination.
<p>Total click: {{ clickCounter }}</p></td><button ng-click="clickCounter = clickCounter + 1">Click Me!</button>example
The following examples will show all the above instructions.
testAngularJS.html
<html><head><title>AngularJS HTML DOM</title></head><body><h2>AngularJS Sample Application</h2><div ng-app=""><table><tr> <td><input type="checkbox" ng-model="enableDisableButton">Disable Button</td> <td><button ng-disabled="enableDisableButton">Click Me!</button></td></tr><tr> <td><input type="checkbox" ng-model="showHide1">Show Button</td> <td><button ng-show="showHide1">Click Me!</button></td></tr><tr> <td><input type="checkbox" ng-model="showHide2">Hide Button</td> <td><button ng-hide="showHide2">Click Me!</button></td></tr><tr> <td><p>Total click: {{ clickCounter }}</p></td> <td><button ng-click="clickCounter = clickCounter + 1">Click Me!</button></td></tr></table></div><script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script></body></html>Output
Open textAngularJS.html in a web browser and see the following results:
The above is a compilation of AngularJS HTML DOM materials. We will continue to add relevant information in the future. Thank you for your support for this website!