AngularJS HTML DOM
AngularJS provides directives to bind application data to attributes of HTML DOM elements.
ng-disabled Directive
The ng-disabled directive binds application data directly to the HTML disabled attribute.
AngularJS Example
Example explanation:
The ng-disabled directive binds the application data "mySwitch" to the HTML disabled attribute.
The ng-model directive binds "mySwitch" to the content (value) of the HTML input checkbox element.
If mySwitch is true, the button will be disabled:
<p><button disabled>Click Me!</button>
</p>
If mySwitch is false, the button will be enabled:
<p><button>Click Me!</button>
</p>
ng-show Directive
The ng-show directive hides or shows an 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>
The ng-show directive shows (hides) the HTML element based on the value.
You can use expressions to calculate a boolean value (true or false):
AngularJS Example
<div ng-app="" ng-init="hour=13">
<p ng-show="hour > 12">I am visible.</p>
</div>
| | In the next section, we will introduce more examples of hiding HTML elements by clicking a button. | | --- | --- |
ng-hide Directive
The ng-hide directive is used to hide or show HTML elements.