WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

AngularJS HTML DOM


AngularJS for HTML DOM Element attributes provide instructions for binding application data.


The ng-disabled directive

The ng-disabled 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>
Try it Yourself »

Example explanation:

ng-disabled directive binds the application data "mySwitch" to the disabled attribute of HTML.

ng-model directive binds "mySwitch" to the content (value) of the HTML input checkbox element.

If mySwitch is true , the button will be unavailable:  

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

If mySwitch is false, the button is available:  

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

The ng-show Directive

The ng-show 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 not visible.</p>

</div>
Try it Yourself »

The ng-show directive is based on value to show (hide) the HTML element.

You can use expressions to calculate booleans (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

The ng-hide directive is used to hide or show HTML elements.

AngularJS Example

<div ng-app="">

<p ng-hide="true">I am not visible.</p>

<p ng-hide="false">I am visible.</p>

</div>
Try it Yourself »