AngularJS with HTML DOM
In AngularJS it is possible to bind application data to an attribute of HTML DOM element.
Table of content
AngularJS with HTML DOM
No. | Name | Description |
---|---|---|
1 | ng-disabled | It is used to disable a given control |
2 | ng-show | It is used to show a given control. |
3 | ng-hide | It is used to hide a given control. |
4 | ng-click | It is used to represent an AngularJS click event. |
AngularJS HTML DOM : Example
<!DOCTYPE html> <html> <head> <script src="angular.min.js"></script> </head> <body> <div ng-app="" ng-controller="controller1"> <p>Toggle check buttons to check the status..</p> <table border="1"> <tr> <td>Disable Button</td> <td>Show Button</td> <td>Hide Button</td> </tr> <tr> <td><input type="checkbox" ng-model="isChecked1"></td> <td><input type="checkbox" ng-model="isChecked2"></td> <td><input type="checkbox" ng-model="isChecked3"></td> </tr> <tr> <td><button ng-disabled="isChecked1">Disable</button></td> <td><button ng-show="isChecked2">Show</button></td> <td><button ng-hide="isChecked3">Hide</button></td> </tr> <tr> <td>{{isChecked1}}</td> <td>{{isChecked2}}</td> <td>{{isChecked3}}</td> </tr> </table> </div> <script> function controller1($scope) { $scope.isChecked1 = true; $scope.isChecked2 = true; $scope.isChecked3 = true; } </script> </body> </html>
Output :
Explanation
In the AngularJS we can manage the attribute of an element using the AngularJS directives.
ng-disabled directive
Consider the below code of the button control in HTML -
<button ng-disabled="isChecked1">Disable</button>
In this case ng-disabled
attribute will decide whether to disable the control or not depending on the value of isChecked1
variable
We can toggle the value of the isChecked1
on the basis of checkbx check value. Using ng-model
directive we can bind the value to variable
<input type="checkbox" ng-model="isChecked1">
ng-show directive
The ng-show
directive shows or hides the given HTML element based on the expression provided to the ng-show
attribute
ng-hide directive
Add ng-hide attribute to a HTML button and pass it a model. Bind the model to an checkbox and see the variation.
ng-click directive
Add ng-click attribute to a HTML button and update a model. Bind the model to html and see the variation.