AngularJS DOM

by Online Tutorials Library July 14, 2022

AngularJS HTML DOM

In AngularJS, some directives can be used to bind application data to 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-disabled directive:The ng-disabled directive binds AngularJS application data to the disabled attribute of HTML elements. In the below code, it binds a model to a checkbox.

     <input ng-model="enableDisableButton" type="checkbox">Disable Button <button ng-disabled="enableDisableButton">Click Me!</button>   

ng-show directive: The ng-show directive shows or hides an HTML element. In the below code, it binds a model to a checkbox.

     <input ng-model="showHide1" type="checkbox">Show Button <button ng-show="showHide1">Click Me!</button>   

ng-hide directive: The ng-hide directive hides or shows an HTML element. In the below code, it binds a model to a checkbox.

<input ng-model="showHide2" type="checkbox">Hide Button <button ng-hide="showHide2">Click Me!</button>   

ng-click directive: The ng-click directive counts the total clicks an HTML element. In the below code, it binds a model to a checkbox.

  
<p>Total click: {{ clickCounter }}</p>
<p> <button ng-click="clickCounter = clickCounter + 1">Click Me!</button>   </p>

Let’s take an example to deploy the all above directives and test the variations:

See this example:

          <title>AngularJS HTML DOM</title>         
<h2>AngularJS Sample Application</h2>
<div ng-app="">
<table border="0">
<tr>
<td><input ng-model="enableDisableButton" type="checkbox">Disable Button</td>
<td><button ng-disabled="enableDisableButton">Click Me!</button></td>
</tr>
<tr>
<td><input ng-model="showHide1" type="checkbox">Show Button</td>
<td><button ng-show="showHide1">Click Me!</button></td>
</tr>
<tr>
<td><input ng-model="showHide2" type="checkbox">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>
<p> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js" id="1e251a830ced8d8df4ddd016b5ffcf57" type="PenciLazyScript"></script>     </p>

Test it Now

Next TopicAngularJS Forms

AngularJS DOM

AngularJS HTML DOM

AngularJS AJAX

Cordova App Templates

You may also like