Events In AngularJS

Rohit Singh
6y
1.7k
0
4

Blog

AngularJS includes certain directives which can be used to provide custom behavior on various DOM events, such as click, dblclick etc.

Let’s take a look at some of the important event directives of AngularJS.

ng-click

The ng-click directive is used to provide an event handler for click event.

<!DOCTYPE html>
<html ng-app="mainApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<title></title>
<meta charset="utf-8" />
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller("appController", function ($scope) {
$scope.btn_click = function(name){
alert(name);
}
});
</script>
</head>
<body ng-controller="appController">
Enter your name : <input type="text" ng-model="name" />
<input type="button" value="click me" ng-click="btn_click(name)" />
</body>
</html>

Output

ng-dblclick (Double Click)

The ng-dblclick directive is used to provide an event handler for a double-click event.

In this example, we will use the same example which we’ve used for ng-click. The only difference is that we are going to use ng-dblclick instead of using ng-click. It also means that the below code will only work if user hits double click.

<!DOCTYPE html>
<html ng-app="mainApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<title></title>
<meta charset="utf-8" />
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller("appController", function ($scope) {
$scope.dblbtn_click = function (name) {
alert(name);
}
});
</script>
</head>
<body ng-controller="appController">
Enter your name : <input type="text" ng-model="name" />
<input type="button" value="click me" ng-dblclick="dblbtn_click(name)" />
</body>
</html>

Output
Angular
ng-mouseenter and ng-mouseleave

In the below example, the ng-class directive includes map of the CSS classes, so GreenDiv will be applied if enter=true and RedDiv will applied if leave=false.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<style>
.GreenDiv {
width: 100px;
height: 100px;
background-color: green;
border-radius: 2px 2px 2px 2px;
padding: 2px 2px 2px 2px;
}
.RedDiv {
width: 100px;
height: 100px;
background-color: red;
border-radius: 2px 2px 2px 2px;
padding: 2px 2px 2px 2px;
}
</style>
</head>
<body ng-app>
<div ng-class="{RedDiv: enter, GreenDiv: leave}" ng-mouseenter="enter=true;leave=false;" ng-mouseleave="leave=true;enter=false">
Mouse <span ng-show="enter">Enter</span> <span ng-show="leave">Leave</span>
</div>
</body>
</html>

Output

ng-change (mouse event)

The below example demonstrates how to use ng-change event on a drop-down list change event.

<!DOCTYPE html>
<html>
<head>
<title> </title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('MyCtrl', function($scope) {
$scope.arrlist = [{
"userid": 1,
"name": "Tim"
}, {
"userid": 2,
"name": "Riya"
}, {
"userid": 3,
"name": "Sam"
}];
$scope.getdetails = function() {
if ($scope.userselected.userid == "1") {
$scope.result = true;
$scope.result1 = false;
$scope.result2 = false;
} else if ($scope.userselected.userid == "2") {
$scope.result = false;
$scope.result1 = true;
$scope.result2 = false;
} else if ($scope.userselected.userid == "3") {
$scope.result = false;
$scope.result1 = false;
$scope.result2 = true;
} else {
$scope.result = false;
$scope.result1 = false;
$scope.result2 = false;
}
}
});
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="MyCtrl"> <select name="users" ng-options="user.name for user in arrlist" ng-change="getdetails()" ng-model="userselected">
<option value="">--Select Name--</option>
</select><br /><br />
<div style="padding:10px; border:1px solid red; width:30%; font-weight:bold" ng-show='result'>Hello Tim</div>
<div style="padding:10px; border:1px solid yellow; width:30%; font-weight:bold" ng-show='result1'>Hello Riya</div>
<div style="padding:10px; border:1px solid green; width:30%; font-weight:bold" ng-show='result2'>Hello Sam</div>
</div>
</body>
</html>

Output

Angular

ng-mousemove (mouse event)

The following example demonstrates how to use ng- mousemove event.

<!DOCTYPE html>
<html>
<head>
<title>
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('MyCtrl', function ($scope) {
$scope.count = 0;
$scope.getdetails = function () {
$scope.count = $scope.count + 1;
}
});
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="MyCtrl">
<div style="padding:10px; border:1px solid black; background-color:aqua; width:200px; height:100px; cursor:pointer;" ng-mousemove="getdetails()">Move Mouse Cursor Here</div><br /><br />
<span style="color:Red; margin-top:25px;">Number of Times Mouse Move Event Fired: {{count}}</span>
</div>
</body>
</html>

Output

Angular

ng-keydown, ng-keyup and ng-keypress (mouse event)

The below example demonstrates how to use ngkey-down, ngkeyup, and ng-keypress events.

<!DOCTYPE html>
<html>
<head>
<title>
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('MyCtrl', function ($scope) {
$scope.getkeys = function (event) {
$scope.keyval = event.keyCode;
}
});
app.controller('MyCtrl1', function ($scope) {
$scope.getkeys = function (event) {
$scope.keyval = event.keyCode;
}
});
app.controller('MyCtrl2', function ($scope) {
$scope.getkeys = function (event) {
$scope.keyval = event.keyCode;
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="MyCtrl">
<div ng-controller="MyCtrl">
<h3>ng-keydown</h3>
Enter any text: <input type="text" ng-keydown="getkeys($event)" ng-model="txt"><br /><br />
<span style="color:green">Last Key Code: {{keyval}}</span>
</div>
<hr />
<div ng-controller="MyCtrl">
<h3>ng-keyup</h3>
Enter any text: <input type="text" ng-keyup="getkeys($event)" ng-model="txt"><br /><br />
<span style="color:red">Last Key Code: {{keyval}}</span>
</div>
<hr />
<div ng-controller="MyCtrl2">
<h3>ng-keypress</h3>
Enter any text: <input type="text" ng-keypress="getkeys($event)" ng-model="txt"><br /><br />
<span style="color:yellowgreen">Last Key Code: {{keyval}}</span>
</div>
</body>
</html>

Output

Up Next

How To Manage F5 Event In AngularJS

Ebook Download

View all

Hands-On With AngularJS Using ASP.NET

Read by 6.3k people

Download Now!

Learn

View all