AngularJS HTML DOM

The following directives are used to bind application data to the attributes of HTML DOM elements-

Serial Number	Name and Description
1	`ng-disabled` Disable the specified control.
2	`ng-show` Show the specified control.
3	`ng-hide` Hide the specified control.
4	`ng-click` Represents the AngularJS click event.

ng-disabled directive

Add ng-Add the disabled attribute to the HTML button and then pass it to the model. Bind the model to the checkbox and observe the changes.

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

ng-show directive

Add ng-Add the show attribute to the HTML button and then pass it to the model. Bind the model to the checkbox and observe the changes.

<input type="checkbox" ng-model　=　"showHide1">Show Button<button ng-show　=　"showHide1">Click　Me!</button>

ng-hide directive

Add ng-Add the hide attribute to the HTML button and then pass it to the model. Bind the model to the checkbox and observe the changes.

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

ng-click directive

Add ng-Add the click attribute to the HTML button and update the model. Bind the model to HTML and observe the changes.

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

Online Example

The following example demonstrates the use of all the above directives.

testAngularJS.htm

Example

<html>
　　　<head>
　　　　　　<title>AngularJS HTML DOM</title>
　　　</head>
　　　
　　　<body>
　　　　　　<h2>AngularJS-HTML DOM example(oldtoolbag.com)</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>Click Total:　{{　clickCounter　}}</p></td>
　　　　　　　　　　　　　　　<td><button　ng-click　=　"clickCounter　=　clickCounter　+　1">Click　Me!</button></td>
　　　　　　　　　　　　</tr>
　　　　　　　　　</table>
　　　　　　</div>
　　　　　　
　　　　　　<script　src　=　"https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js">
　　　　　　</script>
　　　　　　
　　　</body>
</html>

Test and See‹/›

Output Results

Open the file in a web browsertestAngularJS.htmand view the results.

AngularJS Modules AngularJS Tables