AngularJS DOM



  • The AngularJS provides directives for binding application data to the HTML DOM element’s attribute.
  • These are the HTML DOM attributes used in AngularJS.

Syntax for HTML DOM in AngularJS:

<element ng-show="Boolean value"></element>
                        
<element ng-hide="Boolean value"></element>

<element ng-disabled="Boolean value"></element>

Sample code for HTML DOM in AngularJS:

 Tryit<!DOCTYPE html>
<html>
    <head>
        <title>Wikitechy AngularJS Tutorials</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/
        angular.min.js"> </script>
    </head>
    <body>
        <div ng-app="myApp" ng-controller="DOMCtrl">
            <h3>HTML DOM in AngularJS</h3>
            Enter Name :
            <input type="text" ng-model="name" ng-hide="myhide" ng-show="myshow" 
            ng-disabled="mydisabled" />
            <p>myhide : {{myhide}}</p>
            <p>myshow : {{myshow}}</p>
            <p>mydisabled : {{mydisabled}}</p>
            <input type="button" value="Show" ng-click="showFun()" />
            <input type="button" value="Hide" ng-click="hideFun()" />
            <input type="button" value="Disable" ng-click="disFun()" />
        </div>
        <script>
            var app = angular.module( 'myApp', [] );
            app.controller("DOMCtrl", function($scope) {
                $scope.showFun = function () {
                    $scope.myhide = false;
                    $scope.myshow = true;
                    $scope.mydisabled = false;
                };
                $scope.hideFun = function () {
                    $scope.myhide = true;
                    $scope.myshow = false;
                    $scope.mydisabled = false;
                };
                $scope.disFun = function () {
                    $scope.myhide = false;
                    $scope.myshow = true;
                    $scope.mydisabled = true;
                };
            });
        </script>
    </body>
</html>

Data:

  • Set of data has been used in our AngularJS Application.
myhide = false;
myshow = true;
mydisabled = true;

HTML:

  • Viewable HTML contents in AngularJS Application.
<div ng-app="myApp" ng-controller="DOMCtrl">
    <h3>HTML DOM in AngularJS</h3>
    Enter Name :
    <input type="text" ng-model="name" ng-hide="myhide" ng-show="myshow" 
    ng-disabled="mydisabled" />
    <p>myhide : {{myhide}}</p>
    <p>myshow : {{myshow}}</p>
    <p>mydisabled : {{mydisabled}}</p>
    <input type="button" value="Show" ng-click="showFun()" />
    <input type="button" value="Hide" ng-click="hideFun()" />
    <input type="button" value="Disable" ng-click="disFun()" />
</div>

Logic:

  • Controller logic for the AngularJS application.
app.controller("DOMCtrl", function($scope) {
    $scope.showFun = function () {
        $scope.myhide = false;
        $scope.myshow = true;
        $scope.mydisabled = false;
    };
    $scope.hideFun = function () {
        $scope.myhide = true;
        $scope.myshow = false;
        $scope.mydisabled = false;
    };
    $scope.disFun = function () {
        $scope.myhide = false;
        $scope.myshow = true;
        $scope.mydisabled = true;
    };
});

Code Explanation for HTML DOM in AngularJS:

Code Explanation for AngularJS dom

  1. The ng-hide directive is used to hide or show the textbox by changing the Boolean value myhide.
  2. The ng-show directive is used to hide or show the textbox by changing the Boolean value myshow.
  3. The ng-disabled directive is used to disable or enable the textbox by changing the Boolean value mydisabled.
  4. The “Show” button used to call the “showFun()” function.
  5. The “Hide” button used to call the “hideFun()” function.
  6. The “Disable” button used to call the “disFun()” function.
  7. The “DOMCtrl” used to create the controller for the Application with $scope object argument.
  8. The showFun is a function used to set myshow as true, myhide and mydisabled as false variable.
  9. The hideFun is a function used to set myhide as true, myshow and mydisabled as false variable.
  10. The disFun is a function used to set mydisabled and myshow as true and myhide as false variable.

Sample Output for $interval Service in AngularJS:

    Sample Output1 for AngularJS dom

  1. The Values are empty on the page load.

  2. Sample Output2 for AngularJS dom

  3. When user click the Show button then the textbox will be visible.

  4. Sample Output3 for AngularJS dom

  5. When user Click the Hide button then the textbox will be disappear.

  6. Sample Output4 for AngularJS dom

  7. When user click the Disable button then the textbox will be disabled so that user cannot edit the text.



Related Searches to angularjs DOM