Friday, May 22, 2015

ng-click event

AngularJS provides various mouse events to track events raised by user interaction with the mouse like mousedown, mouseover, mouseover etc, in this post we shall see on how to handle the click event using AngularJS

AngularJS provides ng-click directive to handle mouse click events raised by the user, click event can be handled by associating the ng-click directive to an event handler function which passes the mouse event as a parameter.

The following example shows on how to use the ng-click directive to handle click events raised by the user.

<html ng-app="clickApp">
    <meta charset="utf-8">
    <title>AngularJS - Basic</title>
    <script src="angular.min.js"></script>
var app = angular.module('clickApp', []);

function clickController($scope) {
           $scope.HandleEvent = function (mouseEvent) {
                $scope.XPos = mouseEvent.pageX;
                $scope.YPos = mouseEvent.pageY;
                $scope.Event = mouseEvent.shiftKey;
          <div ng-controller="clickController">
                   <div style="width:100px; height:100px; border:1px solid #000000;" ng-click="HandleEvent($event)"></div><br/>
                   click at Position : ({{XPos}}, {{YPos}}) <br/>


Search Flipkart Products:

No comments: