AngularJS HTML DOM

Toggle navigation
TUTORIAL HOME
AngularJS HTML DOM
❮ Previous Next ❯
AngularJS has directives for binding application data to the attributes of HTML DOM elements.

The ng-disabled Directive
The ng-disabled directive binds AngularJS application data to the disabled attribute of HTML elements.

AngularJS Example

Click Me!

Button

{{ mySwitch }}

»
Application explained:

The ng-disabled directive binds the application data mySwitch to the HTML button’s disabled attribute.

The ng-model directive binds the value of the HTML checkbox element to the value of mySwitch.

If the value of mySwitch evaluates to true, the button will be disabled:

Click Me!

If the value of mySwitch evaluates to false, the button will not be disabled:

Click Me!

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

AngularJS Example

I am visible.

I am not visible.

»
The ng-show directive shows (or hides) an HTML element based on the value of ng-show.

You can use any expression that evaluates to true or false:

AngularJS Example

12″>I am visible.

»
In the next chapter, there are more examples, using the click of a button to hide HTML elements.

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

AngularJS Example

I am not visible.

I am visible.

»

❮ Previous Next ❯

Leave a comment