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

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"

Training in Cities

Bangalore, Hyderabad, Chennai, Delhi, Kolkata, UK, London, Chicago, San Francisco, Dallas, Washington, New York, Orlando, Boston

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

top

Sales Offer

  • To avail this offer, enroll before 05th December 2016.
  • 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.