AngularJS / AngularJS HTML DOM

AngularJS uses HTML DOM to access the elements(buttons,text, check box e.t.c) in the html page.

HTML DOM elements attributes are use to bind application data to AngularJS directives.

HTML DOM element attributes	Used
ng-disabled	Disables a control.
ng-show	Shows a control.
ng-hide	Hides a control.
ng-click	Represents a AngularJS click event.

Click Counter Incrementer

Program Name

Write a Click Counter Incrementer Program in AngularJS using HTML DOM.

Theory
Click Counter Incrementer Program in AngularJS using HTML DOM

Program Code


<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">
</script>
<h1>AngularJS - HTML DOM</h1>

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

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

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

Click Counter Incrementer: {{ IncrementCounter }}<br /><br />
<button ng-click = "IncrementCounter = IncrementCounter + 1">Increment Counter</button>
</div>

Input

Button click

Output
Click Counter Incrementer Program in AngularJS using HTML DOM

Home Back