AngularJS has directives for binding application data to the attributes of HTML DOM elements. The logical structure of documents and documents are accessed and manipulated are defined using DOM elements. It defines events, methods, properties for all HTML elements as objects. DOM in AngularJS acts as an API (programming interface) for javascript.
These directives are:
| Directive | Description |
|---|---|
| ng-disabled | It disables a given control. |
| ng-show | It shows a given control. |
| ng-hide | It hides a given control. |
| ng-click | It represents an AangularJS click event. |
Why DOM is used?
A programmer can use DOM in AngularJS for the following purposes:
- Documents are built using DOM elements.
- A Programmer can navigate documents structure with DOM elements.
- A programmer can add elements and content with DOM elements.
- Programmer can modify elements and content with DOM elements.
The ng-disabled Directive
The ng-disabled directive binds AngularJS application data to the disabled attribute of HTML elements.
The Syntax
<strong> od ng-disabled-</strong><input type = "checkbox" ng-model = "enableDisableButton">To disable a button<button ng-disabled = "enableDisableButton">Click</button>
AngularJS Example
<div ng-app="" ng-init="mySwitch=true">
<p>
<button ng-disabled="mySwitch">Click Me!</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch">Button
</p>
<p>
{{ mySwitch }}
</p>
</div>Application explained:
The ng-disabled directive binds the application data mySwitch to the HTML button’s disabled attribute. The ng-model directive binds the value of the HTML checkbox element to the value of mySwitch. If the value of mySwitch evaluates to true, the button will be disabled:
<p> <button disabled>Click Me!</button> </p>
If the value of mySwitch evaluates to false, the button will not be disabled:
<p> <button>Click Me!</button> </p>
The ng-show Directive
The ng-show directive shows or hides an HTML element.
The syntax of ng-show-
<input type = "checkbox" ng-model = "showHide1">To show a Button<button ng-show = "showHide1">Click </button>
AngularJS Example
<div ng-app=""> <p ng-show="true">I am visible.</p> <p ng-show="false">I am not visible.</p> </div>
The ng-show directive shows (or hides) an HTML element based on the value of ng-show. You can use any expression that evaluates to true or false:
AngularJS Example
<div ng-app="" ng-init="hour=13"> <p ng-show="hour > 12">I am visible.</p> </div>
The ng-hide Directive
The ng-hide directive hides or shows an HTML element.
The syntax of ng-hide-
<input type = "checkbox" ng-model = "showHide2">To hide a Button< button ng-hide = "showHide2">Click</button>
AngularJS Example
<div ng-app=""> <p ng-hide="true">I am not visible.</p> <p ng-hide="false">I am visible.</p> </div>
Example
The following example shows use of all the above mentioned directives.
iv. ng-click
We can use ng-click for representing an angularjs click event. We can use it by adding it to an HTML button and pass it to model
The syntax of ng-click-
<p>Number <strong>of</strong> click: {{ clickCounter }}</p><button ng-click = "clickCounter = clickCounter + 1">Click </button>Example of ng-click-
DOCTYPE html> ; html>;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.
min.js"></script><div ng-app=""><p>Total number <strong>of</strong> Clicks: {{ Counts }}</p><button ng-click = "Counts = Counts+ 1">Click Here!</button></div></body></html>Output:
Total number of Clicks: 4
testAngularJS.htm
<html>
<head>
<title>AngularJS HTML DOM</title>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app = "">
<table border = "0">
<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 = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
</body>
</html>Output
Open the file testAngularJS.htm in a web browser and see the result.
AngularJS Sample Application
| Disable Button | Click Me! |
| Show Button | |
| Hide Button | Click Me! |
| Total click: | Click Me! |
Conclusion
A document object model is used for manipulating and accessing the contents in documents created using HTML or XML. In the above article, we have discussed the directives that are used to bind the application data to the attributes of DOM elements such as ng-disabled, ng- show, ng-hide, ng-click. Furthermore, if you have any query, feel free to share with us, surely we will get back to you!
