×

Html & Html5

The World's best Software Development Study Portal

AngularJS HTML DOM


AngularJS has directives for binding application data to the attributes of HTML DOM elements.

ng-disabled Directive: binds AngularJS application data to the disabled attribute of HTML elements

ng-show Directive:shows or hides an HTML element.

ng-hide Directive: hides or shows an HTML element.




    <div ng-app="" ng-init="mySwitch=true">
    <p>
    <button ng-disabled ="mySwitch">Click Me!</button>
    </p>
    <p>
    <input type="checkbox" ng-model="mySwitch">Button
    </p>
    <p  ng-show ="true">I am visible.</p>
<p ng-hide ="true">I am not visible.</p> </div>

Output

Button

I am visible.



  • The ng-disabled directive binds the application data mySwitch to the HTML button's disabled attribute.

  • The ng-model directive binds the value of the HTML checkbox element to the value of mySwitch.

  • If the value of mySwitch evaluates to true, the button will be disabled