LearnKode

8 Example(s) of Ng-DoubleClick


Description :

In this Example if we click on link Double Click Here it will call the function showAlert() which display the alert with specified text.


Ng-DoubleClick Example - 1 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="clickExample">
    <div ng-controller="ExampleController">
        <a href="javascript:void(0)" ng-dblclick="showAlert()">Double Click Here </a>
    </div>
<script>
    var app = angular.module("clickExample", []);
    app.controller('ExampleController', ['$scope', function ($scope) {
        $scope.showAlert = function () {
            alert("This is an example of ng-dblclick");
        }
    }]);
</script>
</body>
</html>
Try it » Download Example »

Output

Description :

In this example we can increase the value of count by 1 if we will double click on the button which is intialize to 0.


Ng-DoubleClick Example - 2 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="clickExample">
    <div ng-controller="ExampleController">
        <button ng-dblclick="count=count+1">Increment (on double click)</button> {{count}}
    </div>
<script>
    var app = angular.module("clickExample", []);
    app.controller('ExampleController', ['$scope', function ($scope) {
        $scope.count = 0;
    }]);
</script>
</body>
</html>
Try it » Download Example »

Output

Description :

In this example we have a button for add items when you click on the Add items button it will add item with some default name. You can edit the entered item by double click on the item and you can make list of your own choice.


Ng-DoubleClick Example - 3 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="clickExample">
    <div ng-controller="ExampleController" ng-init="hideOnBlur=true">
        Double-click on the below items to edit <button ng-click="addRecords()">Add Items</button>
        <div ng-repeat="record in records">
            <b ng-hide="inputShow && index==$index && hideOnBlur" ng-dblclick="editRecord(record.name,$index);hideOnBlur = true">{{record.name}}</b>
            <input ng-show="inputShow && index==$index && hideOnBlur" ng-blur="hideOnBlur=false" ng-model="record.name">
        </div>
    </div>
<script>
    var app = angular.module("clickExample", []);
    app.controller('ExampleController', ['$scope', function ($scope) {
        $scope.records = [{ name: 'LearnIt' }];
        $scope.addRecords = function () {
            var count = $scope.records.length + 1;
            $scope.records.push({ name: 'Double Click On me' + count });
        };
        $scope.editRecord = function (item, indx) {
            $scope.hideOnBlur = true;
            $scope.inputShow = true;
            $scope.item = item;
            $scope.index = indx;
        };
    }]);
</script>
</body>
</html>
Try it » Download Example »

Output

Description :

In this example of double click we have a button Push, when you click on this button it will show alert with text "Click" and when you double click on this button first alert will show "Double Click" and second will show "Click".


Ng-DoubleClick Example - 4 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="clickExample">
    <div ng-controller="ExampleController">
        <button ng-dblclick="dblclick()">Push</button>
    </div>
<script>
    var app = angular.module("clickExample", []);
    app.controller('ExampleController', ['$scope', '$timeout', function ($scope, $timeout) {
        $scope.dblclick = function () {
            alert('Double Click');
        }
    }]);
</script>
</body>
</html>
Try it » Download Example »

Output

Description :

In this if we double click on P(paragraph) element text then text in h4 element will display because default value of isShow variable is true which is assign to ng-show directive.


Ng-DoubleClick Example - 5 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app>
    <div>
        <p ng-dblclick="isShow=true">Double-click on this paragraph.</p>
        <h4 ng-show="isShow">Hello <span style="color:red">Learn</span>It</h4>
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

In this example if we double click on the button it will call the copyText() function which will copy the text of first textbox to the second textbox.


Ng-DoubleClick Example - 6 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="clickExample">
    <div ng-controller="ExampleController">
        Text1: <input type="text" name="Text1" ng-model="Text1" /><br />
        Text2: <input type="text" name="Text2" ng-model="Text2" /><br />
        <button ng-dblclick="copyText()">Copy Text</button>
    </div>
<script>
    var app = angular.module("clickExample", []);
    app.controller('ExampleController', ['$scope', function ($scope) {
        $scope.Text1 = 'LearnIt';
        $scope.copyText = function () {
            $scope.Text2 = $scope.Text1;
        };
    }]);
</script>
</body>
</html>
Try it » Download Example »

Output

Description :

In this example if we double click on the text it will change the color of text because true value is assigned to ng-class and vice versa.


Ng-DoubleClick Example - 7 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <style type="text/css">
        .red {
            color: red;
        }
    </style>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app>
    <div>
        <p ng-dblclick="isColor=!isColor" ng-class="{red:isColor}">Double-click me to change my text color.</p>
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

When we double click on selected value which bind to pattern variable will call the dblClick() function that alert the selected value.


Ng-DoubleClick Example - 8 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="clickExample">
    <div ng-controller="ExampleController">
     Double click on list data: <br />
        <select size="4" ng-model="pattern" ng-dblclick="dblClick(pattern)" ng-options="p.name as p.name for p in names"></select>
    </div>
<script>
    var app = angular.module("clickExample", []);
    app.controller('ExampleController', ['$scope', function ($scope) {
        $scope.names = [{ name: 'First' }, { name: 'Second' }, { name: 'Third' }, { name: 'Four' }];
        $scope.dblClick = function (ptrn) {
            alert(ptrn)
        }
    }]);
</script>
</body>
</html>
Try it » Download Example »

Output