What is AngularJS DOM?
DOM stands for Document Object Model. AngularJS’s directives are used to bind application data to the attributes of HTML DOM elements. The directives are –
1. ng-disabled –
It disables the attribute of HTML elements.
e.g.
<! DOCTYPE html><br>
<html><br>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script><br>
<body><br>
<div ng-app=""><br>
<p><br>
<button ng-disabled="disabledbutton">Click Me!</button><br>
</p><br>
<p><br>
<input type="checkbox" ng-model="disabledbutton"/>Disable Button<br>
</p><br>
</div><br>
</body><br>
</html><br>
Output
If you uncheck the button then output is
Watch this video on Full Stack Web Development Course:
2. ng-show Directive
It shows or hides an HTML element.
e.g.
<! DOCTYPE html><br>
<html><br>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script><br>
<body><br>
<div ng-app=""><br>
<input type = "checkbox" ng-model = "showhidebutton">Show Button<br>
<button ng-show = "showhidebutton">Click Me!</button><br>
</div><br>
</body><br>
</html><br>
Output
If you uncheck the button then output is
3. ng-hide Directive
It hides or shows an HTML element.
e.g.
<!DOCTYPE html><br>
<html><br>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script><br>
<body><br>
<div ng-app=""><br>
<input type = "checkbox" ng-model = "shbutton">Hide Button<br>
<button ng-hide = "shbutton">Click Me!</button><br>
</div><br>
</body><br>
</html><br>
Output
If you uncheck the button then output is
4. ng-click directive
It represents a AngularJS click event.
e.g.
<!DOCTYPE html><br>
<html><br>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script><br>
<body><br>
<div ng-app=""><br>
<p>Total Number of Clicks: {{ ClickCount }}</p><br>
<button ng-click = "ClickCount = ClickCount + 1">Click Me!</button><br>
</div><br>
</body><br>
</html><br>
Output
When you click on this button then number of click is increased by one like as follows:
