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.

<input type="checkbox" ng-model="enableDisableButton">Disable Button
<button ng-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.

<input type="checkbox" ng-model="showHide2">Hide Button
<button ng-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

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
 
<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>

 

Output:

Angularjs HTML DOM

  Modified On Feb-22-2018 12:52:15 AM

Leave Comment