Through this section of the AngularJS tutorial you will learn Document Object Model (DOM), what is ng-disabled, ng-show directive, ng-hide directive and so on.
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 –
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 If you uncheck the button then output is
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>
If you are an AngularJS enthusiast, enroll in the Angular Course and get certified now!
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>
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 When you click on this button then number of click is increased by one like as follows:
Want to be ready for a Job? Check out our blog on Angular Interview Questions!
Course Schedule
Leave a Reply Cancel reply
Your email address will not be published. Required fields are marked *
Comment
Name *
Email *
Browse Categories
Bangalore Hyderabad Chennai Mumbai