---

Search posts under AngularJS:

---

ng-click events in AngularJS

How to perform click/dblclick operation using AngularJS?

To detect click event in AngularJS, we use ng-click directive (ngClick - normalized name) that accepts function name or statements to execute.

In below code snipets, in the <script> block we have an app and controller defined with $scope.counter as property name that is incremented by "2" in the Increment method/function/behavior attached to it.

<script>
    var app = angular.module("app", []);
    app.controller("ClickController", function ($scope) {
        $scope.counter = 0;

        $scope.Increment = function () {
            $scope.counter += 2;
        }
    });
</script>

<div ng-app="app" ng-controller="ClickController">
    <button ng-click="Increment()">Increment</button>
    <p>Counter: {{ counter }}</p>


    <button ng-click="myCount = myCount + 1">Counter </button>
    Counter: {{ myCount }}
</div>

In the HTML block we have a button whose ng-click is set to "Increment() function defined in the controller. When the button is clicked, the value of the counter variable is incremented by "2" that gets written in the expressioninside the <p> element.

In the 2^nd block of code, on click of the button a dynamic myCount variable is created and its value is incremented by "1" and the same is written below it.

Output

ng-Dblclick event

Similar to ng-click event, we have ng-dblclick event (ng-Dblclick - normalized name) as well that executes when user double click the element on which it is attached. The way of attaching ng-dblclick is similar to attaching ng-click. So in short, if we replace "ng-click" to "ng-dblclick" in the above code snippet, it becomes the example of ng-dblclick.

See the ng-dblclick live demo here.