AngularJs ng dbl click directive

AngularJs ng-dbl-click | ng-dblclick Example

Hello everyone, I am going to share the how to use AngularJs ng-dbl-click directive and its example in detail.


First, I am going to explain about ng-dbl-click directive.

The ng-dbl-click directive is used the handle the user dbl click events of the applications.

Second, I am going to explain about syntax of ng-dbl-click.

<button type="button" ng-dbl-click="dblClick(IsDisplay)">NG-DBL-CLICK</button>

Third, I am going to share the AngularJs click event code.

var app = angular.module('myApp', []);
app.controller('ngDblClickCtrl', ["$scope", function ($scope) {
    $scope.domain = "code-sample.com";
    $scope.IsDisplay = false;
    $scope.dblClick = function (clicked) {
        alert("My ng-dbl-Click function is called.");
        $scope.IsDisplay = clicked == true ? false : true;
    };
}]);

Last, I am going to share the live demo example with HTML and AngularJs

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>ng-dbl-click in AngularJs</title>
    <script src="https://code.angularjs.org/1.4.1/angular.js"></script>
    <script>
    var app = angular.module('myApp', []);
    app.controller('ngDblClickCtrl', ["$scope", function ($scope) {
        $scope.domain = "code-sample.com";
        $scope.IsDisplay = false;
        $scope.dblClick = function (clicked) {
            alert("My ng-dbl-Click function is called.");
            $scope.IsDisplay = clicked == true ? false : true;
        };
    }]);
    </script>
</head>
<body ng-app="myApp">
    <div ng-controller="ngDblClickCtrl">
        <div><h2>The ng-dbl-click in AngularJs</h2> </div>
        <div>
            Domain name: <input type="text" ng-model="domain"> <button type="button" ng-dbl-click="dblClick(IsDisplay)">NG-DBL-CLICK</button>
        </div>
        <div>
            <div ng-show="IsDisplay"> My dblClick function is called. <br /><h3 style="color:green;">Display User detail: {{domain}} </h3></div>
        </div>
    </div>
</body>
</html>


Thank you!


ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
My Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.