Angularjs DOM

Following Angularjs Directives can be used to bind application data to attributes of HTML DOM Elements. Directives are rules for html, and html elements (ex {{ expressions }}) act accordingly.

Name Description
ng-disabled disables a given control.
ng-show shows a given control.
ng-hide hides a given control.
ng-click represents a AngularJS click event.

Angularjs ng-disabled Directive

ng-disabled directive binds application data to the disabled passing html element. Check the below code to understand respective directive. When you click on the check box, the button will be disabled.

ng-model directive name ng-disabled directives name should be same.

<div ng-app="">

<input type = "checkbox" ng-model = "mybtn">Click on check box to Disable Button
<button ng-disabled = "mybtn">Click on check box</button>


Angularjs ng-show Directive

ng-show directive shows or hides the given html element based on the expression provided to ng-show attribute.

By default will show the div enabled text. Ng-show directive has two values true and false. And other example you just click on check box button will be enabled.

<div ng-app="" >

<div ng-show="true">div enabled.</div>
<div ng-show="false">div not enabled.</div>

<input type = "checkbox" ng-model = "showd1">click here to enable button
<button ng-show = "showd1">Click Me</button>


Angularjs ng-hide Directive

By default it button is enabled. When you click on the check box button will go off.

<div ng-app="" >

<input type = "checkbox" ng-model = "show1">click here to hide button
<button ng-hide = "show1">Click Me</button>


Angularjs ng-click Directive

Ng-click directive allow you to specify custom behavior when assigned element is clicked.

<div ng-app="" >

<button ng-click="count = count + 1" ng-init="count=0">Click me
count: {{count}} 


ng-disable demo

Click on check box to Disable Button
div enabled.
div not enabled.

ng-show demo

click here to enable button

ng-hide demo

Hide Button

ng-click demo

count: {{count}}