Objectives and outcomes

In this tutorial we are going to learn about some angular-js directives related to HTML-DOM elements for eg- (ng-disabled, ng-show, ng-hide, ng-click). These directives link the application data with HTML-DOM elements.



HTML code:

<html>
<head>
<meta charset="utf-8">
<title>AngularJS HTML-DOM</title>
<script src="angular-1.4.6/angular.min.js"></script>"
</head>
<body>
<input type="checkbox" ng-model="disable">&nbsp;Enable-Disable-Button&nbsp;
<button ng-disabled="disable">Button1</button><br/>

<input type="checkbox" ng-model="shw1">&nbsp;Hide-button&nbsp;
<button ng-hide="shw1">Button2</button><br/>

<p><b>Total click : {{counter}}</b> &nbsp; &nbsp;
<button ng-click="counter = counter + 1">Click-counter</button>
</p><br/>

<input type="checkbox" ng-model="shw">&nbsp;Show-button&nbsp;
<button ng-show="shw">Button3</button><br/>
</body>
</html>



   



   



Total clicks : {{counter}}



   




In the above example the functionality of buttons is controlled by check-boxes as we have linked them using angular directives.
ng-disabled is used to enable or disable HTML-DOM element.
ng-show is used to make visible a HTML-DOM element where as ng-hide performs the reverse action.
ng-click is used to represent an angular-js click event.