Introduction
In my previous articles I told you about:
This article will tell you about the ng-show directive of AngularJS.
In many WebSites you have certainly seen that if your permanent address is different from your current address then you get a new text area for providing your current or mailing address as well. This article will help you to create a similar application using the AngularJS ng-show 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 not Your Current Address then Click Me: </label>
</td>
<td>
<input type="checkbox" />
</td>
</tr>
<tr >
<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 Areas and a checkbox is used but nothing special is done, if at this time we run the application then we will get an output like this one:
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-show directive in AngularJS]()
This was not our moto, we need an application in which a New Textarea should only be provided in those cases where the mailing address is different from the permanent address.
Step 3
Now you need to modify your code with this one:
<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 not Your Current Address then Click Me: </label>
</td>
<td>
<input type="checkbox" ng-model="check" />
</td>
</tr>
<tr ng-show="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 ng-model. After this a new table row is created that is bound to the check of checkbox using the ng-show. What this will do is this row and it's components will only be seen whern the checkbox is checked.
Now I will run my application and you will see that the desired output is produced.
Output
![ng-show directive in angularjs]()
Now you can see that only one Textarea is available to the user, the checkbox is unchecked so that's why the second TextBox is not shown to the user.