AngularJS HTML DOM
AngularJS provides directives that bind application data to attributes of HTML DOM elements.
ng-disabled Directive
ng-disabledThe directive directly binds application data to the disabled attribute of HTML.
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>
<p>
<button ng-disabled="mySwitch">Click me!</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch">Button
</p>
<p>
{{ mySwitch }}
</p>
</div>
Try it Yourself »
Example explanation:
ng-disabledThe directive binds application data "mySwitch" to the HTML disabled attribute.
ng-modelThe directive binds "mySwitch" to the content (value) of the HTML input checkbox element.
IfmySwitchistrue, the button will be disabled:
<p>
<button disabled>Click me!</button>
</p>
<button disabled>Click me!</button>
</p>
IfmySwitchisfalse, the button will be enabled:
<p>
<button>Click me!</button>
</p>
<button>Click me!</button>
</p>
ng-show Directive
ng-showThe directive hides or shows an HTML element.
AngularJS Example
<div ng-app="">
<p ng-show="true">I am visible.</p>
<p ng-show="false">I am invisible.</p>
</div>
<p ng-show="true">I am visible.</p>
<p ng-show="false">I am invisible.</p>
</div>
Try it Yourself »
The ng-show directive, based on valuethe value, displays (hides) the HTML element.
You can use expressions to calculate boolean values (true or false):
AngularJS Example
<div ng-app="" ng-init="hour=13">
<p ng-show="hour > 12">I am visible.</p>
</div>
Try it Yourself »
 |
In the next chapter, we will introduce more examples of hiding HTML elements by clicking buttons. |
|---|
ng-hide Directive
ng-hideThe directive is used to hide or show an HTML element.
AngularJS Example
<div ng-app="">
<p ng-hide="true">I am invisible.</p>
<p ng-hide="false">I am visible.</p>
</div>
<p ng-hide="true">I am invisible.</p>
<p ng-hide="false">I am visible.</p>
</div>
Try it Yourself »