AngularJs includes certain directives which can be
used to provide custom behaviour 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 directives is used to provide 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 directives is used to provide event
handler for 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 using ng-click. It also means that below code will only work if user
press 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:
ng-mouseenter
and ng-mouseleave
In below example, the ng-class directive includes map
of css classes, so GreenDiv will 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)
Below example demonstrates that how to use ng-change
event on 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:
ng-mousemove
(mouse event)
Below example demonstrates that 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:
ng-keydown,
ng-keyup and ng-keypress (mouse event)
Below example demonstrates that how to use ngkey-down,
ngkeyup and ng-keypress 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.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:
No comments:
Post a Comment