HTML DOM in Angular JS – Sibeesh Passion https://sibeeshpassion.com My passion towards life Thu, 20 Aug 2015 05:23:23 +0000 en-US hourly 1 https://wordpress.org/?v=6.9.4 /wp-content/uploads/2017/04/Sibeesh_Passion_Logo_Small.png HTML DOM in Angular JS – Sibeesh Passion https://sibeeshpassion.com 32 32 Learning AngularJS: HTML DOM https://sibeeshpassion.com/learning-angularjs-html-dom/ https://sibeeshpassion.com/learning-angularjs-html-dom/#disqus_thread Wed, 29 Apr 2015 20:21:03 +0000 https://sibeeshpassion.com/?p=1601 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:

  • Basics of AngularJS
  • AngularJS Search Box Using Filter
  • Learning AngularJS: $http

    • 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

    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

    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

    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

    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

    ]]>     https://sibeeshpassion.com/learning-angularjs-html-dom/feed/ 0