AngularJS HTML DOM
AngularJS provides instructions to bind application data for properties of HTML DOM elements.
ng-disabled command
The ng-disabled directive directly binds application data to the disabled attribute of HTML.
AngularJS instance
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script></head><body><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> </body></html>Running effect:
Button
true
Example explanation:
The ng-disabled directive binds the application data "mySwitch" to the disabled property of HTML.
The ng-model directive binds "mySwitch" to the content (value) of the HTML input checkbox element.
If mySwitch is true, the button will not be available:
<p><button disabled>Click me! </button></p>
If mySwitch is false, the button is available:
<p><button>Click me!</button></p>
ng-show command
The ng-show directive hides or displays an HTML element.
AngularJS instance
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script></head><body><div ng-app=""><p ng-show="true">I am visible. </p><p ng-show="false">I am invisible. </p></div> </body></html>
Running effect:
I'm visible.
The ng-show directive displays (hides) HTML elements based on the value of the value.
You can use expressions to calculate boolean values (true or false):
AngularJS instance
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script></head><body><div ng-app="" ng-init="hour=13"><p ng-show="hour> 12">I am visible. </p></div></body></html>
Running results:
I'm visible.
Note In the next chapter, we will provide you with more examples of hiding HTML elements by clicking on buttons.
ng-hide command
The ng-hide directive is used to hide or display HTML elements.
AngularJS instance
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script></head><body><div ng-app=""><p ng-hide="true">I am invisible. </p><p ng-hide="false">I'm visible. </p></div> </body></html>
Running results:
I'm visible.
The above is a compilation of AngularJS HTML DOM materials. We will continue to add them later. I hope that friends who can help program AngularJS.