Angularjs Quick Start Guide 10:dom node

ANGULARJS binds application data to the attributes of an HTML DOM element through directives.

ng-disabled directive

　　The ng-disabled directive binds ANGULARJS application data to the disabled attribute of the HTML element.

<DivNg-app=""><P><Buttonng-disabled= "Myswitch">Click me!</Button></P><P><inputtype= "checkbox"Ng-model= "Myswitch">Button</P></Div>

Run

Code Explanation:

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

　　The ng-model directive binds the value values of the HTML checkbox element to the myswitch object.

If the value of myswitch is true, the button will be disabled out:

< P > <  disabled>Click me! </ Button > </ P >

If the value of myswitch is false, the button is not disabled out:

< P > < Button > Click me! </ Button > </ P >

Ng-show directive

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

<DivNg-app=""><PNg-show= "true">I am visible.</P><PNg-show= "false">I am not visible.</P></Div>

Run

The ng-show instruction displays (or hides) an HTML element through value values.

You can use any expression that can return True or FALSE, for example:

<ng-app= ""><ng-show= "Hour > ">I am visible. </ P > </ Div >

Run

	In the following chapters there will be more examples of hiding HTML elements through the Click event of a button.

Ng-hide directive

We can also hide or display an HTML element by Ng-hide instructions.

<DivNg-app=""><PNg-hide= "true">I am not visible.</P><PNg-hide= "false">I am visible.</P></Div>

Run

Previous chapter-Angularjs Quick Start Guide 09:sql Next chapter-Angularjs Quick Start Guide 11: Events

Angularjs Quick Start Guide 10:dom node