Introduction
In my previous articles I told you about:
This article explains the ng-dblclick directive of AngularJS.
Today's article will help you to create an application where you may use the double-click event, this article will help you to create a double-click event using AngularJS.
Step 1
You need to first 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 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 JavaScript 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">
I will now create two Textboxes, one anchor and one Label. Double-clicking the anchor will replace the second TextBox with the Label. Right now I will just create the application without having any type of funtionality.
<body>
<form id="form1" runat="server">
<table >
<tr>
<td>
<label>Provide Your First Name</label>
</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>
<label>Provide your Last Name</label>
</td>
<td>
<input type="text" />
<label >Hey!!</label>
</td>
</tr>
<tr >
<td>
<label>Double Click Me to Show Greetings:</label>
</td>
<td>
<a href="">Click Me</a>
</td>
</tr>
</table>
</form>
</body>
If we run the application at this level then this type of output will be seen:
Output
![ng-dblclick directive using angularjs]()
We don't require this type of output, this is simply a table in which a few HTML Controls are used and nothing more than that.
Now I will add functionality to this application.
Step 3
First of all I am creating a JavaScript function in the head tag that will have some initial values to be applied to the TextBox so that it can show a default name every time it is executed.
<script>
function x($scope) {
$scope.initial = 'Anu';
}
</script>
Now I will modify the code that was provided in Step 2 so that the functionality can be added to it.
<body>
<form id="form1" runat="server">
<table ng-controller="x">
<tr>
<td>
<label>Provide Your First Name</label>
</td>
<td>
<input ng-model="initial" />
</td>
</tr>
<tr>
<td>
<label>Provide your Last Name</label>
</td>
<td>
<input ng-hide="check" />
<label ng-show="check" >{{check}}</label>
</td>
</tr>
<tr ng-hide="check">
<td>
<label>Double Click Me to Show Greetings:</label>
</td>
<td>
<a href="" ng-dblclick="check='Hello '+initial">Click Me</a>
</td>
</tr>
</table>
</form>
</body>
The function name is bound with the table using the ng-controller, in this table the first TextBox is bound with the initial value provided in the script tag, after this one more TextBox and a label are declared in the same td and both are bound to the same dblclick directive as well but only one will be seen at a time, initially the TextBox will be seen but double-clicking will hide the TextBox and will show the Label.
At the end an anchor is taken in that double-click event; is declared using the dblclick.
Now our application is created and is ready to be executed.
Output
On running the application you will see that the first TextBox has the value that was declared as the initial value in the JavaScript function. The second TextBox is also available but Label is nowhere to be seen.
![ng-dblclick directive using angularjs]()
Now as I double-click this anchor you can see that a Label is seen along with the value provided in the first TextBox.