Learning AngularJS: HTML DOM
Today we will learn about Angular JS HTML DOM elements. We will be discussion about ng-disabled, ng-show, ng-hide, ng-show-conditional expression in this article. These are the tags we can use for manipulating our dom elements. It is very easy to handle these tags. We will explain this with examples. I hope you will like this article.
If you are new to Angular JS then I suggest you read the basics of Angular JS here:
Using the code
The ng-disabled directive normally binds the data to the disabled property of our HTML elements. The following is the example for that.
[html]
<b>ng-disabled</b>
<div ng-app="">
<p>
<input type="checkbox" ng-model="myVal" />Please enable me
</p>
<p>
<button ng-disabled="!myVal ">Wow! You enabled me :)</button>
</p>
</div>
[/html]
Here we have a model that is a check box. What we do is, whenever a user clicks that checkbox we are applying that value to the ng-disabled property of the button. Please see the following output.
Learning AngularJS
Learning AngularJS
Now we will explain ng-show.
The ng-show shows or hides the HTML controls depending on the ng-show value.
Please see the following example.
[html]
<b>ng-show</b>
<p>
<input type="checkbox" ng-model="showhide" />Please show me
</p>
<p ng-show="showhide">Am I visible? {{showhide}}</p>
[/html]
In the preceding example we are taking the value from the model showhide and applying to the ng-show.
Please see the output below.
Learning AngularJS
Learning AngularJS
You can apply any expression also. We will discuss that in the following example.
[html]
<b>ng-show-Conditional expressions</b>
<div ng-init="isAdmin=true">
<p ng-show="isAdmin == true">Admin User</p>
</div>
[/html]
The preceding will show the output as:
Learning AngularJS
ng-hide
The ng-hide directive is the same as the ng-show:
[html]
<b>ng-hide</b>
<p ng-hide="true">Not visible.</p>
<p ng-hide="false">Visible.</p>
[/html]
In the preceding example we are applying the ng-hide value directly. We can use the ng-model for the same as we discussed in the preceding examples.
This will return the output as follows.
Learning AngularJS
Complete HTML
[html]
<!DOCTYPE html>
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Angular JS HTML Dom – www.sibeeshpassion.com</title>
<script src="angular.min.js"></script>
</head>
<body>
<b>ng-disabled</b>
<div ng-app="">
<p>
<input type="checkbox" ng-model=" myVal " />Please enable me
</p>
<p>
<button ng-disabled="!myVal ">Wow! You enabled me :)</button>
</p>
<b>ng-show</b>
<p>
<input type="checkbox" ng-model="showhide" />Please show me
</p>
<p ng-show="showhide">Am I visible? {{showhide}}</p>
<b>ng-show-Conditional expressions</b>
<div ng-init="isAdmin=true">
<p ng-show="isAdmin == true">Admin User</p>
</div>
<b>ng-hide</b>
<p ng-hide="true">Not visible.</p>
<p ng-hide="false">Visible.</p>
</div>
</body>
</html>
[/html]
Conclusion
Now that is all for today, I will return with another set of items in Angular JS soon. I hope you liked this article. Please provide your valuable suggestions.
Kindest Regards
Sibeesh venu
