Hi everyone in this blog I’m explaining about HTML DOM in angularjs.

Introduction:

Following directives can be used to bind application data to attributes of HTML DOM Elements.

1.       Ng-disabled:  disables a given control.

2.       Ng-show:  shows a given control.

3.       Ng-hide:  hides a given control,

4.       Ng-clck:  represents an angularjs click event.

ng-disabled directive:

Add ng-disabled attribute to a HTML button and pass it a model. Bind the model to an checkbox and see the variation.

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

ng-show directive:

Add ng-show attribute to a HTML button and pass it a model. Bind the model to an checkbox and see the variation.

ng-hide directive:

Add ng-hide attribute to a HTML button and pass it a model. Bind the model to an checkbox and see the variation.

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

ng-click directive:

Add ng-click attribute to a HTML button and update a model. Bind the model to html and see the variation.

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

Example:

Following example will showcase all the above mentioned directives.

testAngularJS.htm

<scriptsrc="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
 
<h2>AngularJS Sample Application</h2>
<divng-app="">
    <tableborder="0">
        <tr>
            <td>
                <inputtype="checkbox"ng-model="enableDisableButton">Disable Button</td>
            <td>
                <buttonng-disabled="enableDisableButton">Click Me!</button></td>
        </tr>
        <tr>
            <td>
                <inputtype="checkbox"ng-model="showHide1">Show Button</td>
            <td>
                <buttonng-show="showHide1">Click Me!</button></td>
        </tr>
        <tr>
            <td>
                <inputtype="checkbox"ng-model="showHide2">Hide Button</td>
            <td>
                <buttonng-hide="showHide2">Click Me!</button></td>
        </tr>
        <tr>
            <td>
                <p>Total click: {{ clickCounter }}</p>
            </td>
            <td>
                <buttonng-click="clickCounter = clickCounter + 1">Click Me!</button></td>
        </tr>
    </table>
</div>

Output: