AngularJS html dom explanation and sample code, angularjsdom
The following commands can be used to bind application data to attributes of html dom elements.
S. No. |
Name |
Description |
1 |
Ng-disabled |
Disable a given control |
2 |
Ng-show |
Display a given control |
3 |
Ng-hide |
Hide in the given control |
4 |
Ng-click |
AngularJS click Event |
Ng-disabled command
Add the ng-disabled attribute to an HTML button through its model. Bind the model to the check box 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 attribute 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 command
Add the ng-hide attribute as 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 Command
Add the ng-click attribute as HTML button and update the model. Bind the model to HTML to see the changes in the combination.
<p>Total click: {{ clickCounter }}</p></td><button ng-click="clickCounter = clickCounter + 1">Click Me!</button>
Example
The following example shows all the preceding commands.
TestAngularJS.html
Output
Open textangularjs.html in the webbrowser and see the following results:
The above is the arrangement of AngularJS html dom data. We will continue to add relevant information in the future. Thank you for your support for this site!