Detailed explanation of HTML DOM example of AngularJS introductory tutorial
- 2021-07-06 09:49:27
- OfStack
AngularJS HTML DOM
AngularJS provides instructions for binding application data for attributes of HTML DOM elements.
ng-disabled instruction
The ng-disabled directives bind application data directly to the disabled property 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"> Order me !</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch"/> Button
</p>
<p>
{{ mySwitch }}
</p>
</div>
</body>
</html>
Running effect:
Order me!
Button
true
Example explanation:
The ng-disabled directive binds the application data "mySwitch" to the disabled attribute of HTML.
The ng-model instruction binds "mySwitch" to the contents of the HTML input checkbox element (value).
If mySwitch is true, the button will not be available:
<p>
<button disabled> Order me! </button>
</p>If mySwitch is false, the button is available:
<p>
<button> Order me !</button>
</p>
ng-show instruction
The ng-show directive hides or displays 1 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'm visible. </p>
<p ng-show="false"> I'm invisible. </p>
</div>
</body>
</html>
Running effect:
I'm visible.
The ng-show instruction shows (hides) the HTML element based on the value of value.
You can use expressions to evaluate Boolean values (true or false):
AngularJS Example
<!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'm visible. </p>
</div>
</body>
</html>
Run results:
I'm visible.
Note In the next chapter, we'll show you 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.
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'm visible. </p>
</div>
</body>
</html>
Run results:
I'm visible.
The above is the collation of AngularJS HTML DOM data, and the follow-up continues to supplement, hoping to help programming AngularJS friends.