AngularJS DOM

AngularJS DOM can be used to manipulate HTML elements in different ways. Using AngularJS DOM you can perform functionalities like disabling an enabling an element, showing and hiding and element etc. In this article we shall how to use AngularJS DOM to enable disable HTML elements and show and hide the elements.

Disable and Enable Elements

To disable or enable an element, add “ng-disable” attribute to the opening tag of the element. The value passed to the “ng-disable” directive is the AngularJS application data. The “ng-disable” directive simply binds this value to the disable attribute of the html element. Therefore, if the application data has value “true” for “ng-disable” directive, the corresponding element gets disable and vice versa. Take a look at the following example.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<body>

    <div ng-app="" ng-init="flag=true">

    <p>
    <button ng-disabled="flag">Click to check</button>
    </p>

    <p>
    <input type="text" ng-model="flag">
    </p>



    </div>

</body>
</html>

Download the code Try the code

Open the above web page in the browser. You should see a button and a text box. By default button should be enabled and the text box should contain false. As soon as you enter something other than false in the text box the button will be disabled. Now take a look at the code. It has one AngularJS application variable “flag” which has a default value of false. Next, there is a button element with “ng-disabled” attribute. The value of the attribute is set to “flag”. This means that by default button disable attribute is set to false. Or in other words, button is enabled. However, if you enter something in the text box, the “flag” variable is set to true and button gets disabled.

Hide and Show Elements

You can hide or show html elements via “ng-show” and “ng-hide” directives. Take a look at the following example.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<body>

    <div ng-app="" ng-init="flag=true">


    <p>
    <input type="text" ng-model="flag">
    </p>
        
    <p ng-show="flag">This is paragraph 1</p>

    <p ng-hide="flag"> This is paragraph 2</p>

    </div>

</body>
</html>

Download the code Try the code

In the above application, again flag variable has assigned value true. There are two paragraphs. The first paragraph has “ng-show” directive while the second has “ng-hide” directive. Both have values equal to flag variable. Therefore by default first paragraph will be shown and second will be hidden. If you remove the “true” from text box, second paragraph will become visible and first will hide. This is because flag will have false value now.

<<< AngularJS SelectAngularJS Events >>>