Angular Dom

AngularJS HTML DOM

---

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

---

The ng-disabled Directive

The ng-disabled directive binds AngularJS application information 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 explained:
The ng-disabled directive binds the application information mySwitch to the HTML button's disabled attribute.
The ng-model directive binds the value of the HTML checkbox chemical component subdivision to the value of mySwitch.
If the value of mySwitch evaluates to true, the push volition move disabled: 

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

If the value of mySwitch evaluates to false, the push volition non move disabled: 

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

---

The ng-show Directive

The ng-show directive shows or hides an HTML element.

AngularJS Example

<div ng-app="">

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

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

</div>

The ng-show directive shows (or hides) an HTML chemical component subdivision based on the value of ng-show.
You tin role whatever facial expression that evaluates to truthful or false:

AngularJS Example

<div ng-app="" ng-init="hour=13">

<p ng-show="hour > 12">I am visible.</p>

</div>

In the adjacent chapter, in that place are to a greater extent than examples, using the click of a push to shroud HTML elements.

---

The ng-hide Directive

The ng-hide directive hides or shows an HTML element.

AngularJS Example

<div ng-app="">

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

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

</div>

---