AngularJS HTML DOM

AngularJS provides directives that can bind application data to attributes of HTML DOM elements.

ng-disabled Directive

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

AngularJS Examples

<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>

Try It Yourself

Application instructions:

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

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

If mySwitch The value of truethen the button will be disabled:

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

If mySwitch The value of falseIf so, the button will not be disabled:

<p>
<button>Click me!</button>
</p>

ng-show Directive

ng-show Directives to display or hide HTML elements.

AngularJS Examples

<div ng-app="">  
<p ng-show="true">I am visible.</p>  
<p ng-show="false">I am invisible.</p>  
</div>

Try It Yourself

ng-show Directives are based on the ng-show'sValueDisplay (or hide) HTML elements.

You can use any expression evaluated to true or false:

AngularJS Examples

<div ng-app="" ng-init="hour=13">
<p ng-show="hour > 12">I am visible.</p>
</div>

Try It Yourself

In the next chapter, more examples will be provided to show how to use button clicks to hide HTML elements.

ng-hide directive

ng-hide Directives to hide or display HTML elements.

AngularJS Examples

<div ng-app="">  
<p ng-hide="true">I am invisible.</p>  
<p ng-hide="false">I am visible.</p>  
</div>

Try It Yourself