When we talk about event handling that include mouse events and keyboard events like on click, ondoubleclick , on key press etc etc. And for every advance application where user interact with application, there we require event handling.
ng-click directive allow you to click the html element and on clicking this element, you can perform some functionality or can perform any type of calculation according to the need.
Let's understand with a very simple example for ng-click directive.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Welcome in the Angular JS</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
</head>
<body ng-app>
<div>
<button ng-click="count=count+1" ng-init="count=0">Click It</button>
<div>
Count is :{{count}}
</div>
</div>
</body>
</html>
In the example, on the button click we increment the value of count by 1 and set the initial value zero with the help of ng-init directive and in the div element we print the value of {{ count }}, each time when you click on the button the value of count variable increment by 1.
We can also execute function with the help of ng-click directive. Let's understand with an example.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Welcome in the Angular JS</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
</head>
<body ng-app="sampleApplication">
<div ng-controller="sampleController">
<button ng-click="incrementCount()">Click It</button>
<div>
Count is :{{count}}
</div>
</div>
<script>
var app = angular.module("sampleApplication", []);
app.controller("sampleController", function($scope) {
$scope.count=0;
$scope.incrementCount = function (){
$scope.count += 1;
};
});
</script>
</body>
</html>
In this example the ng-click directive calls the function incrementCount() and in the function we increment the value of count variable by one each time when the funcation calls. You can do whatever you want in this function according to the requirments.
ng-dblclick directive allow you to double click the html element and on double click this element you can perform some function or can do any type of calculation according to the need. Let's understand simple example for ng-dblclick directive.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Welcome in the Angular JS</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
</head>
<body ng-app="sampleApplication">
<div ng-controller="sampleController">
<button ng-dblclick="incrementCount()">Click It</button>
<div>
Count is :{{count}}
</div>
</div>
<script>
var app = angular.module("sampleApplication", []);
app.controller("sampleController", function($scope) {
$scope.count=0;
$scope.incrementCount = function (){
$scope.count += 1;
};
});
</script>
</body>
</html>
The ng-keypress event of Angular JS allow you to define your custom behavior on the keypress event.
The ng-keydown event of Angular JS allow you to define your custom behavior on the keydown event.
The ng-keyup event of Angular JS allow you to define your custom behavior on the keyup event. Lets see the example of ng-keypress,ng-keydown and ng-keyup events.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Welcome in the Angular JS</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
</head>
<body ng-app>
<div>
<div>
Increment on Key Press :<input ng-keypress="count1=count1+1" ng-init="count1=0" />
Count is :{{count1}}
</div>
<div>
Increment on Key down :<input ng-keydown="count2=count2+1" ng-init="count2=0" />
Count is :{{count2}}
</div>
<div>
Increment on Key up :<input ng-keyup="count3=count3+1" ng-init="count3=0" />
Count is :{{count3}}
</div>
</div>
</body>
</html>
The ng-keypress event increase the value of {{ count1 }} by 1 each time when we press the key inside first input. The initial value of {{ count1 }} is Zero. Same for the second ng-keydown it increase the value of {{ count2 }} by 1 each time when key goes down in the second input. In the third green box ng-keyup event increase the value of {{ count3 }} by 1 each time when the key is up. For the Angular JS events Event Object as $event is available for keyCode , altKey etc. We can also perform functions instead of evaluate expressions on these events.
The ng-mousedown event of Angular JS allow you to define your custom behavior on the mouse down event. Let's understand with an example.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Welcome in the Angular JS</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
</head>
<body ng-app>
<div>
<button ng-mousedown="count=count+1" ng-init="count=0">Mouse Down to increment</button>
Count is :{{count}}
</div>
</body>
</html>
The ng-mouseup event of Angular JS allow you to define your custom behavior on the mouse up event. Let's understand with an example.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Welcome in the Angular JS</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
</head>
<body ng-app>
<div>
<button ng-mouseup="count=count+1" ng-init="count=0">Mouse Up to increment</button>
Count is :{{count}}
</div>
</body>
</html>
The ng-mouseover event of Angular JS allow you to define your custom behavior on the mouse over event. This event is execute when mouse is on the element on which we define this event. Let's try with an example.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Welcome in the Angular JS</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
</head>
<body ng-app>
<div>
<button ng-mouseover="count=count+1" ng-init="count=0">Mouse Over to increment</button>
Count is :{{count}}
</div>
</body>
</html>
The ng-mouseenter event of Angular JS allow you to define your custom behavior on the mouse enter event. Let's try with an example.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Welcome in the Angular JS</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
</head>
<body ng-app>
<div>
<button ng-mouseenter="count=count+1" ng-init="count=0">Enter Mouse to increment</button>
Count is :{{count}}
</div>
</body>
</html>
The ng-mouseleave event of Angular JS allow you to define your custom behavior on the mouse leave event. Let's try with an example.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Welcome in the Angular JS</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
</head>
<body ng-app>
<div>
<button ng-mouseleave="count=count+1" ng-init="count=0">Leave Mouse to increment</button>
Count is :{{count}}
</div>
</body>
</html>
The ng-mousemove event of Angular JS allow you to define your custom behavior on the mouse move event. The event execute when you move mouse on the element on which we define this event. Let's try with an example.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Welcome in the Angular JS</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
</head>
<body ng-app>
<div>
<button ng-mousemove="count=count+1" ng-init="count=0">Move Mouse to increment</button>
Count is :{{count}}
</div>
</body>
</html>
The ng-blur directive executes the expression when the element lost focus. Let's try with an example.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Welcome in the Angular JS</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
</head>
<body ng-app>
<div>
<input type="text" ng-blur="count=count+1" ng-init="count=0" />
Count is :{{count}}
</div>
</body>
</html>