Home > DeveloperSection > Blogs > Angularjs HTML DOM

Angularjs HTML DOM


Angular JS Angularjs Factory 
Ratings:
0 Comment(s)
 805  View(s)
Rate this:

Angularjs HTML DOM

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 controle.

3.       Ng-hide:  hides a given controls,

4.       Ng-clck:  represents a 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.

<input type="checkbox" ng-model="showHide1">Show Button

<button ng-show="showHide1">Click Me!</button>

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:


Don't want to miss updates? Please click the below button!

Follow MindStick