Summary: in this tutorial, you will learn how to use the
AngularJS HTML DOM and how can use HTML DOM.Introduction to AngularJS HTML DOM
AngularJS has directives for binding application data to the attributes of HTML DOM elements. The following directives are used to bind application data to the attributes of HTML DOM elements;
These directives are:
| Directive | Description |
|---|---|
| ng-disabled | It disables a given control. |
| ng-show | It shows a given control. |
| ng-hide | It hides a given control. |
| ng-click | It represents an AangularJS click event. |
ng-disable Directive
ng-disable directive are use for binds AngularJS application data to the disabled attribute of HTML elements.
<input type = "checkbox" ng-model = "enableDisableButton">Disable Button
button ng-disabled = "enableDisableButton">Click Me!</button>
ng-show Directive
ng-show directive are use for show or hide Html elements.
<input type = "checkbox" ng-model = "showHide1">Show Button
button ng-show = "showHide1">Click Me!</button>
ng-hide Directive
ng-hide directive are use for hide or show an Html elements.
<input type = "checkbox" ng-model = "showHide2">Hide Button
<button ng-hide = "showHide2">Click Me!</button>
ng-click Directive
ng-click directive are use for perform an AngularJS click event...
<p>Total click: {{ clickCounter }}</p>
0lt;button ng-click = "clickCounter = clickCounter + 1">Click Me!</button>
Let's take an example to deploy the all above directives and test the variations:
See this example:
<!DOCTYPE html>
<html>
<head>
<title>AngularJS HTML DOM</title>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app = "">
<table border = "0">
<tr>
<td><input type = "checkbox" ng-model = "enableDisableButton">Disable Button</td>
<td><button ng-disabled = "enableDisableButton">Click Me!</button></td>
</tr>
<tr>
<td><input type = "checkbox" ng-model = "showHide1">Show Button</td>
<td><button ng-show = "showHide1">Click Me!</button></td>
</tr>
<tr>
<td><input type = "checkbox" ng-model = "showHide2">Hide Button</td>
<td><button ng-hide = "showHide2">Click Me!</button></td>
</tr>
<tr>
<td><p>Total click: {{ clickCounter }}</p></td>
<td><button ng-click = "clickCounter = clickCounter + 1">Click Me!</button></td>
</tr>
</table>
</div>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</body>
</html>
0 comments:
Post a Comment