AngularJS - HTML DOM Elements Bind

Following directives can be used to bind application data to attributes of HTML DOM Elements.
Sr.No. Name Description
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.

<div ng-app="">
    <table border="0" class="table">
        <tr>
            <td>
                <input type="checkbox" ng-model="enableDisableButton" />Disable Button</td>
            <td>
                <button class="btn btn-primary" ng-disabled="enableDisableButton">Click Me!</button>
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" ng-model="showHide1" />Show Button</td>
            <td>
                <button class="btn btn-success" ng-show="showHide1">Click Me!</button>
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" ng-model="showHide2" />Hide Button</td>
            <td>
                <button class="btn btn-warning" ng-hide="showHide2">Click Me!</button>
            </td>
        </tr>
        <tr>
            <td>
                <p>Total click: <strong>{{ clickCounter }}</strong></p>
            </td>
            <td>
                <button class="btn btn-danger" ng-click="clickCounter = clickCounter + 1">Click Me!</button>
            </td>
        </tr>
    </table>
</div>
AngularJS - HTML DOM Elements Bind AngularJS - HTML DOM Elements Bind Reviewed by Bhaumik Patel on 8:19 PM Rating: 5