Open In App

AngularJS HTML DOM

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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:

 



Last Updated : 05 Sep, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads