March 30, 2015 09:06 by
Peter
This article explains double-click events in AngularJS. we've already explained mouse events exploitation AngularJS in my previous article Mouse Events exploitation AngularJS. currently during this article i'm 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 will use it (ng-dblclick) as an attribute of the HTML component like:
<ANY_HTML_ELEMENT ng-dblclick="{expression}">
...
</ANY_HTML_ELEMENT>
Use the subsequent procedure to make a sample of a double-click event using AngularJS. First of all, you would like to add an external Angular.js file to your application, for this you'll be able to visit the AngularJS official website or transfer my source code then fetch it or click on this link and download it: ANGULARJS. once downloading the external file you would like to add this file to the head section of your application. Now, I'll show you the way to use the ng-dblclick directive. I am making a TextBox and button and binding the TextBox using the ng-model directive and therefore 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 ties with ng-demonstrate, The catch is bound with ng-dblclick and inside the ng-dblclick I have composed '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.
And here is the code that I used:
<!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>
Here is the Output, when Page loads:
HostForLIFE.eu AngularJS Hosting
HostForLIFE.eu is European Windows Hosting Provider which focuses on Windows Platform only. We deliver on-demand hosting solutions including Shared hosting, Reseller Hosting, Cloud Hosting, Dedicated Servers, and IT as a Service for companies of all sizes. We have customers from around the globe, spread across every continent. We serve the hosting needs of the business and professional, government and nonprofit, entertainment and personal use market segments.
