We now have a youtube channel. Subscribe!

AngularJS | HTML DOM

AngularJS | HTML DOM


Hello folks! welcome back to a new section of our tutorial on AngularJS. In this tutorial, we will be studying about AngularJS HTML DOM.

The following directives below are used for binding application data to the attributes of HTML DOM elements -

Sr.No.Name & Description
1

ng-disabled

disables a given control.

2

ng-show

shows a given control.

3

ng-hide

hides a given control.

4

ng-click

represents a AngularJS click event.


ng-disabled Directive

Insert the ng-disabled directive to an HTML button and pass it a model. Bind the model to a checkbox and see the variation.

<input type = "checkbox" ng-model = "enableDisableButton">Disable Button
<button ng-disabled = "enableDisableButton">Click Me!</button>

ng-show Directive

Insert ng-show directive to an HTML button and then pass it a model. Bind the model to a checkbox and see the variation.

<input type = "checkbox" ng-model = "showHide1">Show Button
<button ng-show = "showHide1">Click Me!</button>


ng-hide Directive

Insert ng-hide directive to an HTML button and then pass it a model. Bind the model to a checkbox and see the variation.

<input type = "checkbox" ng-model = "showHide2">Hide Button
<button ng-hide = "showHide2">Click Me!</button>

ng-click Directive

Insert ng-click directive to an HTML button and then pass it a model. Bind the model to HTML and see the variation.

<p>Total click: {{ clickCounter }}</p>
<button ng-click = "clickCounter = clickCounter + 1">Click Me!</button>

Example

The following example illustrates the use of all the above mentioned directives -

Create a file testAngularJS.html.

<html>
   <head>
      <title>AngularJS HTML DOM</title>
   </head>
   
   <body>
      <h2>AngularJS Sample Application</h2>
      
      <div ng-app = "">
         <table border = "0">
            <tr>
               <td><input type = "checkbox" ng-model = "enableDisableButton">Disable Button</td>
               <td><button ng-disabled = "enableDisableButton">Click Me!</button></td>
            </tr>
            <tr>
               <td><input type = "checkbox" ng-model = "showHide1">Show Button</td>
               <td><button ng-show = "showHide1">Click Me!</button></td>
            </tr>
            <tr>
               <td><input type = "checkbox" ng-model = "showHide2">Hide Button</td>
               <td><button ng-hide = "showHide2">Click Me!</button></td>
            </tr>
            <tr>
               <td><p>Total click: {{ clickCounter }}</p></td>
               <td><button ng-click = "clickCounter = clickCounter + 1">Click Me!</button></td>
            </tr>
         </table>
      </div>
      
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
      </script>
      
   </body>
</html>

Output

Open the file testAngularJS.html in any web browser and you will see the result -

AngularJS Sample Application

Disable Button
Show Button
Hide Button

Total click:



Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial, we are going to be studying about AngularJS Modules.

Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.

Post a Comment

Hello dear readers! Please kindly try your best to make sure your comments comply with our comment policy guidelines. You can visit our comment policy page to view these guidelines which are clearly stated. Thank you.
© 2022 ‧ WebDesignTutorialz. All rights reserved. Developed by Jago Desain