---
title: "Angularjs HTML DOM"  
description: "Hi everyone in this blog I’m explaining about HTML DOM in angularjs.  Introduction:Following directives can be used to bind application data to attrib"  
author: "Anonymous User"  
published: 2015-03-23  
updated: 2018-02-22  
canonical: https://www.mindstick.com/blog/10855/angularjs-html-dom  
category: "angular js"  
tags: ["angularjs factory"]  
reading_time: 2 minutes  

---

# Angularjs HTML DOM

Hi everyone in this blog I’m explaining about HTML DOM in [angularjs](https://www.mindstick.com/articles/13081/advantages-disadvantages-of-angularjs-is-that-ideal-for-your-project).\

##### Introduction:

##

Following [directives](https://www.mindstick.com/blog/44/directives-in-asp-dot-net) can be used to bind [application](https://www.mindstick.com/articles/12824/calculator-application-in-android) data to [attributes](https://www.mindstick.com/articles/13105/2-attributes-that-make-your-odoo-ecommerce-theme-productive-and-engaging) of HTML DOM Elements.

1. Ng-disabled: disables a given [control](https://www.mindstick.com/blog/197/asp-dot-net-repeater-control).

2. Ng-show: shows a given control.

3. Ng-hide: hides a given control,

4. Ng-clck: represents an angularjs [click event](https://www.mindstick.com/forum/424/how-to-call-form_paint-event-on-button-click-event).

##### ng-disabled directive:

##

Add ng-disabled [attribute](https://www.mindstick.com/blog/221/attributes-reflection) to a HTML [button](https://www.mindstick.com/articles/63/how-to-add-button-in-datagridview-in-csharp-dot-net) and pass it a model. Bind the model to an [checkbox](https://www.mindstick.com/articles/291/how-should-use-checkbox-control-in-vb-dot-net) and see the variation.

```
<input type="checkbox" ng-model="enableDisableButton">Disable Button<button ng-disabled="enableDisableButton">Click Me!</button>
```

##### ng-show directive:

Add ng-show attribute to a HTML button and pass it a model. Bind the model to an checkbox and see the variation.

##

##### ng-hide directive:

##

Add ng-hide attribute to a HTML button and pass it a model. Bind the model to an checkbox and see the variation.

```
<input type="checkbox" ng-model="showHide2">Hide Button<button ng-hide="showHide2">Click Me!</button>
```

##### ng-click directive:

##

Add ng-click attribute to a HTML button and update a model. Bind the model to html and see the variation.

```
<p>Total click: {{ clickCounter }}</p></td><button ng-click="clickCounter = clickCounter + 1">Click Me!</button>
```

##### \

##### Example:

##

Following example will [showcase](https://answers.mindstick.com/qa/105858/what-are-the-advantages-of-using-linkedin-showcase-pages-for-niche-content) all the above mentioned directives.

##### testAngularJS.htm

```
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> <h2>AngularJS Sample Application</h2><div ng-app="">    <table border="0">        <tr>            <td>                <input type="checkbox" ng-model="enableDisableButton">Disable Button</td>            <td>                <button ng-disabled="enableDisableButton">Click Me!</button></td>        </tr>        <tr>            <td>                <input type="checkbox" ng-model="showHide1">Show Button</td>            <td>                <button ng-show="showHide1">Click Me!</button></td>        </tr>        <tr>            <td>                <input type="checkbox" ng-model="showHide2">Hide Button</td>            <td>                <button ng-hide="showHide2">Click Me!</button></td>        </tr>        <tr>            <td>                <p>Total click: {{ clickCounter }}</p>            </td>            <td>                <button ng-click="clickCounter = clickCounter + 1">Click Me!</button></td>        </tr>    </table></div>
```

##### Output:

![Angularjs HTML DOM](https://www.mindstick.com/blogs/275d7156-c74b-4258-b68f-8b0e7f4f1c5c/images/af033226-89bb-4d8c-b5e5-66d68f5008f8.png)

---

Original Source: https://www.mindstick.com/blog/10855/angularjs-html-dom

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.