AngularJS HTML DOM Uses with demo and example

AngularJS HTML DOM Uses with demo and example

Following directives can be used to bind application data to attributes of HTML DOM Elements. AngularJs is a client side MVC framwork of javascript.It provide rich functionaly on html element.some featears are these:
1 ng-disabled disables a given control.
2 ng-show shows a given control.
3 ng-hide hides a given control.
4 ng-click represents a AngularJS click event.

ng-disabled directive

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

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

ng-show directive

The ng-show directive is used for display hide element by calling ng-mode.

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

ng-hide directive

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

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

ng-click directive

Add ng-click attribute to a HTML button and update a model.ng-click directive is used for count click on element. Bind the model to html and see the variation.

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

AngularJS HTML DOM Example

        <html>
        <head>
        <title>AngularJS HTML DOM</title>
        </head>
        <body style="color:#FF9933">
        <h2>AngularJs Dom Example</h2>
        <div ng-app="">
        <table border="0">
        <tr>
           <td><input type="checkbox" ng-model="change">Disable Button</td>
           <td><button ng-disabled="change">Click Me!</button></td>
        </tr>
        <tr>
           <td><input type="checkbox" ng-model="show">Show Button</td>
           <td><button ng-show="show">Click Me!</button></td>
        </tr>
        <tr>
           <td><input type="checkbox" ng-model="hide">Hide Button</td>
           <td><button ng-hide="hide">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>
AngularjsDomexample

AngularjsDomexample

Share Button

About admin

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Author: pramod kumar kumawat Mob: 9269727062
Free WordPress Themes - Download High-quality Templates