AngularJS DOM

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

The ng-disabled Directive

The ng-disabled directive links AngularJS application data to the disabled attribute of HTML elements.

AngularJS Example

<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>
{{ mySwitch }}
</p>

</div>

Application Overview:

The ng-disabled directive connects the application data mySwitch to the disabled attribute of an HTML button, while the ng-model directive links the checkbox’s value to mySwitch. If mySwitch is true, the button will be disabled.

<p>
<button disabled>Click Me!</button>
</p>

If the value of mySwitch evaluates to false, the button will remain enabled.

<p>
<button>Click Me!</button>
</p>