AngularJS HTML DOM

AngularJS HTML DOM

AngularJS provides instructions for binding application data to the attributes of an HTML DOM element.

ng-disabled Directive

The ng-disabled directive binds the application data directly to the disabled property of the HTML .

Example

<div ng-app= "" ng-init= "Myswitch=true" >
<p>
<button ng-disabled= "Myswitch" > Point I!</button>
</p>
<p>
<input type= "checkbox" ng-model= "myswitch" > button
</p>
<p>
{{Myswitch}}
</p>
</div>

Example Explanation:

The ng-disabled directive binds the application data "Myswitch" to the disabled property of the HTML .

the ng-model directive binds "Myswitch" to the contents of the HTML input checkbox Element (value ).

If myswitch is true, the button will not be available :

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

If myswitch is false, the button is available :

<p>
<button> i!</button>.
</p>

ng-show Directive

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

Example

<div ng-app= "" >
<p ng-show= "True" > I was visible. </p>
<p ng-show= "false" > I am not visible. </p>
</div>

The ng-show directive displays (hides)HTML elements based on value values .

You can use an expression to evaluate a Boolean value ( true or false):

Example

<div ng-app= "" >
<p ng-show= "Hour >" > I was visible. </p>
</div>

AngularJS HTML DOM