Introduction
In my previous articles I told you about:
This article explains the ng-hide directive of AngularJS.
In many web sites you have certainly seen that if your permanent address is similar to your current address then one of the Textareas is either disabled or is not shown to the user. This article will help you to create a similar application using the AngularJS ng-hide directive.
Step 1
First of all you need to add an external Angular.js file to your application, in other words "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 download it: ANGULARJS.
After downloading the external file now you need to add this file to the Head section of your application.
<head runat="server">
<title></title>
<script src="angular.min.js"></script>
</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.
<html ng-app xmlns="http://www.w3.org/1999/xhtml">
Now I will work on the ViewModel.
<body>
<form id="form1" runat="server">
<table>
<tr>
<td>
<label>Your Permanent Address:</label>
</td>
<td>
<textarea placeholder="Click Here"></textarea>
</td>
</tr>
<tr>
<td>
<label>If Your Permanent Address is also Your Current Address then Click Me: </label>
</td>
<td>
<input type="checkbox" ng-model="check" />
</td>
</tr>
<tr ng-hide="check">
<td>
<label>Your Current Address:</label>
</td>
<td>
<textarea placeholder="Click Here"></textarea>
</td>
</tr>
</table>
</form>
</body>
Here I have created a table in which two Text ar eas and a checkbox is used but nothing special is done, if at this time we run the application then we will get output like the following.
Output
Here you can see that both of the Text Areas are available and it doesn't matter whether you have the same mailing and permanent address or not.
![ng-hide directive in angularjs]()
This was not our moto, we need an application in which one of the Textareas is hidden if both of the Addresses are the same.
Step 3
Now you need to modify your code with this code:
<body>
<form id="form1" runat="server">
<table>
<tr>
<td>
<label>Your Permanent Address:</label>
</td>
<td>
<textarea placeholder="Click Here"></textarea>
</td>
</tr>
<tr>
<td>
<label>If Your Permanent Address is also Your Current Address then Click Me: </label>
</td>
<td>
<input type="checkbox" ng-model="check" />
</td>
</tr>
<tr ng-hide="check">
<td>
<label>Your Current Address:</label>
</td>
<td>
<textarea placeholder="Click Here"></textarea>
</td>
</tr>
</table>
</form>
</body>
Now I have bound the checkbox using the ng-model. After this a new Table Row is created that is bound to the check of the checkbox using ng-hide. What this will do is this row and it's components will be hidden when the checkbox is checked.
Now I will run my application and you will see that the desired output is produced.
Output
![ng-hide directive in angularjs]()
Now you can see that first I provided my first address and then I checked the check box, on checking the checkbox the second Textarea is hidden so I can't provide any other address in the second textarea.