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>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="">
<p>
<button ng-disabled="disabledbutton">Click Me!</button>
</p>
<p>
<input type="checkbox" ng-model="disabledbutton"/>Disable Button
</p>
</div>
</body>
</html>

Output
output8
If you uncheck the button then output is
o9

Watch this TypeScript vs JavaScript Tutorial Video for Beginners:

AngularJS DOM 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> <html> <script src= \"http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js\"></script> <body> <div ng-app=\"\">


2. ng-show Directive – It shows or hides an HTML element.
 e.g.

<! DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="">
<input type = "checkbox" ng-model = "showhidebutton">Show Button
<button ng-show = "showhidebutton">Click Me!</button>
</div>
</body>
</html>

Output
o10
If you uncheck the button then output is
o11

3. ng-hide Directive – It hides or shows an HTML element.
e.g.

<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="">
<input type = "checkbox" ng-model = "shbutton">Hide Button
<button ng-hide = "shbutton">Click Me!</button>
</div>
</body>
</html>

 Output
o12
If you uncheck the button then output is
o13

4. ng-click directive – It represents a AngularJS click event.
e.g.

<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="">
<p>Total Number of Clicks: {{ ClickCount }}</p>
<button ng-click = "ClickCount = ClickCount + 1">Click Me!</button>
</div>
</body>
</html>

 Output
o14
When you click on this button then number of click is increased by one like as follows:
o15

Recommended Videos

Leave a Reply

Your email address will not be published. Required fields are marked *