Angularjs HTML DOM
ANGULARJS provides instructions for binding application data for attributes of HTML DOM elements.
ng-disabled directives
The ng-disabled directive binds the application data directly to the disabled properties of the HTML.
Angularjs instance
<!--</span--> DOCTYPE HTML >
< HTML >
The < head >
< meta charset = "utf-8" >
< script SRC = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" > < / script >
The < / head >
The < body >
< div ng - app = "" ng - init =" mySwitch = true ">
< p >
<button ng-disabled="mySwitch"> point me! < / button >
< / p >
< p >
<input type="checkbox" ng-model="mySwitch"> button
< / p >
< p >
{{mySwitch}}
< / p >
< / div >
The < / body >
The < / HTML >
</button>
Operation Effect:
Point me!
Button
True
Example Explanation:
The ng-disabled directive binds the application data "myswitch" to the disabled property of the HTML.
The Ng-model instruction 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> dot me! </button> </p>
If Myswitch is false, the button is available:
<p> <button> dot i!</button> </p>
Ng-show directives
The ng-show instruction hides or displays an HTML element.
Angularjs instance
<!--</span--> 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 = "" > I am visible. < / p > I am not visible. < / p > < / div > < / body > < / HTML >
Operation Effect:
I was visible.
The ng-show instruction displays (hides) HTML elements based on value values.
You can use an expression to compute a Boolean value (True or FALSE):
Angularjs instance
<!--</span--> 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 "> 12"> I'm visible. < / p > < / div > < / body > < / HTML >
Run Result:
I was visible.
Note In the next section, we'll give you more examples of how to hide HTML elements by clicking the button.
Ng-hide directives
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'm invisible</p> <p ng-hide="false">I was visible.</p> </div> </body> </html>
Run Result:
I was visible.
The above is the ANGULARJS HTML DOM data collation, follow-up continue to supplement, hope can help programming Angularjs friend.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
