Skip to content
Related Articles

Related Articles

AngularJS HTML DOM

Improve Article
Save Article
  • Last Updated : 05 Sep, 2022
Improve Article
Save Article

The HTML DOM in AngularJS facilitates the directives that bind the application data with the attributes of HTML DOM elements. In this article, we will see such directives that help to bind the data to the HTML DOM element’s attribute, along with their basic implementations through the illustrations.

ng-show & ng-hide Directive: Both the directives are used to show or hide the element of HTML. It depends upon either of the value of directives, i.e., either “true” or “false“.

Example 1: This example describes the AngularJS HTML DOM by implementing the ng-show & ng-hide Directive.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <script src=
    </script>
</head>
  
<body style="text-align:center;">
    <div ng-app="">
        <!-- ng-show =true -->
        <h1 style="color:green" ng-show="true">
            GeeksforGeeks</h1>
        <!-- ng-show =false -->
        <p ng-show="false">GeeksforGeeks</p>
  
        <!-- ng-hide =true -->
        <p ng-hide="true">ng-hide is true</p>
  
        <!-- ng-hide =false -->
        <p ng-hide="false"
              A Computer Science Portal For Geeks
        </p>
    </div>
</body>
</html>


Output:

ng-disabled Directive: It disables the attribute of HTML elements. It binds the data to the disabled HTML element’s attributes.

Example 2: This example implements the ng-disabled Directive to enable and disable buttons using the checkbox.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <script src=
    </script>
</head>
  
<body style="text-align: center;">
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>AngularJS HTML DOM</h3>
    <div ng-app="" ng-init="mySwitch=true">
        <p>
            <button ng-disabled="mySwitch" 
                    onclick="alert('Not Disabled')">
                 Click Me! 
            </button>
        </p>
        <p>
            <input type="checkbox" 
                   ng-model="mySwitch" />
                   Button
        </p>
        <p> {{ mySwitch }} </p>
    </div>
</body>
</html>


Output:

 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!