WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

AngularJS HTML DOM


AngularJS has orders for restricting application information to the qualities of HTML DOM elements.


The ng-crippled Directive

The ng-disabled order ties AngularJS application information to the crippled trait 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>
Try it Yourself »

Application explained:

The ng-disabled mandate ties the application information mySwitch to the HTML catch's disabled attribute.

The ng-model mandate ties the estimation of the HTML checkbox component to the estimation of mySwitch.

If the estimation of mySwitch assesses to true, the catch will be disabled: 

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

If the estimation of mySwitch assesses to false, the catch will not be disabled: 

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

The ng-show Directive

The ng-show mandate shows or shrouds a 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 mandate shows (or conceals) a HTML component dependent on the value of ng-appear.

You can utilize any articulation that assesses to genuine or false:

AngularJS Example

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

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

</div>
Try it Yourself »

The ng-shroud Directive

The ng-hide mandate stows away or demonstrates a HTML element.

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 »