AngularJS Events
Events in AngularJS are actions or a function call performed when clicking a HTML element, mouse click event, keyboard keyDown, keyUp events, focus and blur event. Events are performed using different Directives in AngularJS app. Some events directives are ng-click, ng-keydown, ng-keyup, ng-keypress, ng-mousedown, ng-mouseenter, ng-mouseleave, ng-change.
Example: ng-click
<html>
<head>
<title>AngularJS - Expressions JSON Objects</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myController1">
<p>Current number: {{count}}</p>
<button ng-click="add()">Add</button>
<button ng-click="count = count - 1">Minus</button>
</div>
</body>
<script>
var app = angular.module("myApp",[]);
app.controller("myController1",function ($scope){
$scope.count = 0;
$scope.add = function()
{
++$scope.count;
}
});
</script>
</html>
OUTPUT:
As you can see in the example above, the ng-click directive can call a function defined in a controller or directly evaluate an expression. The count variable will be changed by +1 or -1 when any of the button is clicked and the expression {{count}} will update the View.
Example of ng-Change event:
<html>
<head>
<title>AngularJS - Expressions JSON Objects</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myController1">
<p><input type='text' ng-change="changeEvent()" ng-model="number"></input></p>
<p>Current number: {{number}}</p>
<p>Number x 2 = {{newNumber}}</p>
</div>
</body>
<script>
var app = angular.module("myApp",[]);
app.controller("myController1",function ($scope){
$scope.number = 0;
$scope.newNumber = 0;
$scope.changeEvent = function()
{
$scope.newNumber = 2 * $scope.number;
}
});
</script>
</html>
OUTPUT:
Keyboard Events: ng-keypress, ng-keyup, ng-keydown
As the name suggest these events are fired when Keyboard events occurs on a control. ng-keypress, ng-keyup, ng-keydown directives are used for keyboard events.
Example:
<html>
<head>
<title>AngularJS - Expressions JSON Objects</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myController1">
<p><input ng-change="changeEvent()" ng-model="number"
ng-keydown="Down = 1+Down" ng-keyup="Up = 1+Up" ng-keypress="Press = 1+ Press" type="number"></input></p>
<p>Current number: {{number}}</p>
<p>Number x 2 = {{newNumber}}</p>
<p>ng-keydown: {{Down}}</p>
<p>ng-keyup: {{Up}}</p>
<p>ng-keyPress: {{Press}}</p>
</div>
</body>
<script>
var app = angular.module("myApp",[]);
app.controller("myController1",function ($scope){
$scope.number = 0;
$scope.newNumber = 0;
$scope.Down = 0;
$scope.Up = 0;
$scope.Press = 0;
$scope.changeEvent = function()
{
$scope.newNumber = 2 * $scope.number;
}
});
</script>
</html>
OUTPUT:
Mouse Events:
Mouse events in AngularJS occurs when user performs a mouse action like click or leaving on a HTML control. It can be called on a control using directives: ng-mouseup, ng-mousedown, ng-mouseenter, ng-mouseleave, ng-mousemove, ng-mouseover
Example:
<html>
<head>
<title>AngularJS - Expressions JSON Objects</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myController1">
<p><input ng-change="changeEvent()" ng-model="number"
ng-mousedown="Down = 1+Down" ng-mouseup="Up = 1+Up"
ng-mouseenter="Enter = 1+Enter"
ng-mouseleave="Leave = 1+ Leave" type="number"></input></p>
<p>Current number: {{number}}</p>
<p>Number x 2 = {{newNumber}}</p>
<p>ng-mouseDown: {{Down}}</p>
<p>ng-mouseUp: {{Up}}</p>
<p>ng-mouseEnter: {{Enter}}</p>
<p>ng-mouseLeave: {{Leave}}</p>
</div>
</body>
<script>
var app = angular.module("myApp",[]);
app.controller("myController1",function ($scope){
$scope.number = 0;
$scope.newNumber = 0;
$scope.Down = 0;
$scope.Up = 0;
$scope.Enter = 0;
$scope.Leave = 0;
$scope.changeEvent = function()
{
$scope.newNumber = 2 * $scope.number;
}
});
</script>
</html>
OUTPUT:
In the next section of this series we will learn about AngularJS Filters.
References: AngularJS API DOC