bing
Flat 10% & upto 50% off + Free additional Courses. Hurry up!
×
UPTO
50%
OFF!

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

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

"0 Responses on AngularJS DOM"

100% Secure Payments. All major credit & debit cards accepted Or Pay by Paypal.
top

Sales Offer

  • To avail this offer, enroll before 22nd September 2017.
  • This offer cannot be combined with any other offer.
  • This offer is valid on selected courses only.
  • Please use coupon codes mentioned below to avail the offer
offer-june

Sign Up or Login to view the Free AngularJS DOM.