Introduction
This article explains double-click events in AngularJS. We have already explained mouse events using AngularJS in my previous article Mouse Events using AngularJS. Now in this article I am explaining the ng-dblclick directive of AngularJS.
ng-dblclick
This allows you to specify custom behaviour on a double-click event of the mouse on the web page. We can use it (ng-dblclick) as an attribute of the HTML element like:
<ANY_HTML_ELEMENT ng-dblclick="{expression}">
...
</ANY_HTML_ELEMENT>
Use the following procedure to create a sample of a double-click event using AngularJS.
Step 1: First of all you need to add an external Angular.js file to your application, for this you can go to the AngularJS official site or download my source code and then fetch it or 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 as in the following:
Step 2: Now I will show you how to use the ng-dblclick directive.
I am creating a TextBox and button and binding the TextBox using the ng-model directive and the button using the ng-dblclick directive. The code is as follows:
<body>
Name:
<input ng-model="name" type="text" />
<button ng-dblclick="Msg='Hello '+name">
Double Click
</button>
</br>
<h3>
{{Msg}}</h3>
</body>
Here the TextBox binds with ng-model, The button is bound with ng-dblclick and inside the ng-dblclick I have written 'Hello '+name. Where Hello is a string and name is a variable that contains the value of the input TextBox. This button will work when you double-click on it.
Complete Code
<!doctype html>
<html ng-app>
<head>
<script src="angular.min.js"></script>
</head>
<body>
Name:
<input ng-model="name" type="text" />
<button ng-dblclick="Msg='Hello '+name">
Double Click
</button>
</br>
<h3>
{{Msg}}</h3>
</body>
</html>
Output