×

Html & Html5

The World's best Software Development Study Portal

AngularJS HTML DOM


What is AngularJS DOM?

  • DOM stands for Document Object Model.

  • AngularJS's directives are used to bind application data to the attributes of HTML DOM elements.

  • The logical structure of documents and documents are accessed and manipulated are defined using DOM elements.

  • It defines events, methods, properties for all HTML elements as objects.

  • DOM in AngularJS acts as an API (programming interface) for javascript.

  • Whenever a web page is loaded, the browser creates a Document Model Object (DOM) of that page.





  • Why DOM is used?

    A programmer can use DOM in AngularJS for the following purposes:

    1)Documents are built using DOM elements.

    2)A Programmer can navigate documents structure with DOM elements.

    3)A programmer can add elements and content with DOM elements.

    4)Programmer can modify elements and content with DOM elements.



    In this Angular HTML DOM Tutorial, we are going to explore why DOM is used and different types of directives used in DOM: ng-disabled, ng-show, ng-hide, and ng-click with their syntax and examples.




    The ng-disabled Directive

    Theng-disableddirective binds AngularJS application data to the disabled attribute of HTML elements.

    Example

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

    <p>
    <button ng-disabled="mySwitch">Click Me!</button>
    </p>

    <p>
    <input type="checkbox" ng-model="mySwitch">Button
    </p>

    <p>
    {{ mySwitch }}
    </p>

    </div>



    Example explained: The ng-disabled directive binds the application data mySwitch to the HTML button's disabled attribute. The ng-model directive binds the value of the HTML checkbox element to the value of mySwitch. If the value of mySwitch evaluates to true, the button will be disabled:




    The ng-show Directive

    The ng-show directive shows or hides an HTML element.


    Example

    <div ng-app="">

    <p ng-show="true">I am visible.</p>

    <p ng-show="false">I am not visible.</p>

    </div>




    The ng-hide Directive

    The ng-hide directive hides or shows an HTML element.

    Example

    <div ng-app="">

    <p ng-hide="true">I am not visible.</p>

    <p ng-hide="false">I am visible.</p>

    </div>




    The ng-click Directive

    We can use ng-click for representing an angularjs click event. We can use it by adding it to an HTML button and pass it to model

    Example:If the value of mySwitch evaluates to true, the button will be disabled:

    <p>
    <button disabled>Click Me!</button>
    </p>




    Example:If the value of mySwitch evaluates to false, the button will not be disabled:

    <p>
    <button>Click Me!</button>
    </p>




  • The ng-disabled directive binds the application data mySwitch to the HTML button's disabled attribute.

  • The ng-model directive binds the value of the HTML checkbox element to the value of mySwitch.

  • If the value of mySwitch evaluates to true, the button will be disabled

  • Conclusion:

    A document object model is used for manipulating and accessing the contents in documents created using HTML or XML. In the above article, we have discussed the directives that are used to bind the application data to the attributes of DOM elements such as ng-disabled, ng- show, ng-hide, ng-click. Furthermore, if you have any query, feel free to share with us, surely we will get back to you!