ng-disabled Directive of AngularJS

Introduction

In my previous articles I told you about:

This article explains the ng-disabled directive of AngularJS.

In many websites you must have seen that if your permanent address is also your current address then you just need to provide one of them and the other becomes disabled. This article will help you to create a similar application using the AngularJS ng-disabled directive.

Step 1

First of all you need to add an external Angular.js file to your application, "angular.min.js".

For this you can go to the AngularJS official site or can download my source code and then fetch it or you can click on this link and can download it: ANGULARJS.

After downloading the external file you need to add this file to the Head section of your application.

</head>

Step 2

Now after adding the external JS file the first thing you need to do is to add ng-app in the <HTML> Tag otherwise your application will not run.

Now I will work on the ViewModel.

In the View Model I am taking two Text Areas and one Checkbox, the first Text Area will be for the Permanent Address and the second is for the Current Address, if the user's Permanent Address and Current Address are the same then the user will check the checkbox then in that case the second Text Area will become disabled.

Let's see the code for this:

<body>

<table>

<tr>

<td>

<label>Your Permanent Address:</label>

</td>

<td>

</td>

</tr>

<tr>

<td>

<label>Your Permanent Address is your Current Address than Click Me: </label>

</td>

<td>

</td>

</tr>

<tr>

<td>

<label>Your Current Address Address:</label>

</td>

<td>

<textareaplaceholder="Click Here"></textarea>

</td>

</tr>

</table>

</form>

</body>

Here I have created a table in which two Text Areas and a checkbox is used but nothing special is done, if at this time we run the application then we will get output like this.

Output

Here you can see that I have provided the address in both the Text Area, even the checkbox was checked.

ng-disabled using angularjs

This was not our intent, we need an application in which one TextArea is disabled when the same value is entered.

Step 3

Now you need to modify your code with this one:

<body>

<table>

<tr>

<td>

<label>Your Permanent Address:</label>

</td>

<td>

</td>

</tr>

<tr>

<td>

<label>Your Permanent Address is your Current Address than Click Me: </label>

</td>

<td>

</td>

</tr>

<tr>

<td>

<label>Your Current Address Address:</label>

</td>

<td>

</td>

</tr>

</table>

</form>

</body>

Now I have bound the checkbox using the ng-model. Towards the end the second Text Area is bound to the checkbox's check using the ng-disabled.

This second Text Area and Checkbox are bound so that if the checkbox is checked then the Text Area will be disabled and if it's unchecked then the Text Area will remain enabled.

Now I will run my application and you will see that the desired result is produced.

Output

ng-disabled using angularjs

Now you can see that first I have provided my first address and then I checked the check box, on checking the checkbox the second Textarea is disabled and I was not allowed to enter anything.