1. What are angular Js Events?

There are so many Angular Js events. They are

•  ng-click

•  ng-Dbl click

•  ng-mouseEnter

•  ng-mouse up

•  ng-mouse down

•  ng-mouse leave

•  ng-mouseOver

•  ng-mouse move

•  ng-keypress

•  ng-key up

•  ng-key downng-change

•  ng-change

 

2. What is ng-click Event?

The ng-click event is used to triggers the click event.

<!DOCTYPE  html>
<html>
<head>
<script src="http://ajax.googleapis.com/
ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body>
<div ng-app="myFirstApp" >
<div ng-controller="myController">
<button ng-click="clicked()">click</button>
</div>
</div>
<script>
var myFirstApp = angular.module('myFirstApp',[]);
myFirstApp.controller('myController',['$scope',function($scope){
$scope.clicked = function(){
alert("hi,hello");
}
}]);
</script>	
</body>
</html>

 

3. What is the Dbl click event?

Dbl click is used to trigger the double click event.

<!DOCTYPE  html>
<html>
<head>
<script src="http://ajax.googleapis.com/
ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body>
<div ng-app="myFirstApp" >
<div ng-controller="myController">
<button ng-dblclick="clicked()">click</button>
</div>
</div>
<p>Click the button two times .You will get alert box</p>
<script>
var myFirstApp = angular.module('myFirstApp',[]);
myFirstApp.controller('myController',
['$scope',function($scope){
$scope.clicked = function(){
alert("hi,hello");
}	
}]);
</script>	
</body>
</html>

 

4. What is the ng-mouse enter event?

ng-mouse enter is used to triggers the mouse enters event to run when a mouse enter event occurs.

<!DOCTYPE  html>
<html>
<head>
<script src="http://ajax.googleapis.com/
ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body>
<div ng-app="myFirstApp" >
<div ng-controller="myController">
<button ng-mouseenter="entered()">click</button>
</div>
</div>
<p>When you enter mouse you will get alert box</p>
<script>
var myFirstApp = angular.module('myFirstApp',[]);
myFirstApp.controller('myController',['$scope',function($scope){
$scope. entered = function(){
alert("hi,hello");
}	
}]);
</script>	
</body>
</html>

 

5. What is the ng-mouse leave event?

ng-mouse leave is used to triggers the mouse leave event to run when a mouse leave event occurs.

<!DOCTYPE  html>
<html>
<head>
<script src="http://ajax.googleapis.com/
ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body>
<div ng-app="myFirstApp" >
<div ng-controller="myController">
<button ng-mouseleave="leaved()">click</button>
</div>
</div>
<p>When you leave mouse you will get alert box</p>
<script>
var myFirstApp = angular.module('myFirstApp',[]);
myFirstApp.controller('myController',
['$scope',function($scope){
$scope. leaved = function(){
alert("hi,hello");
}	
}]);
</script>	
</body>
</html>

 

6. What is the toggle?

Toggle event is used to show and hide.

<!DOCTYPE  html>
<html>
<head>
    <script src="http://ajax.googleapis.com/
ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body>
<div ng-app="myFirstApp"  ng-controller="myController">
<button ng-click="click()">click</button>
<div ng-show = "show">
<div>Hello</div>
<div>Welcome to ebclearn.com</div>
</div>
<p>click the button to show and hide.</p>
<script>
var myFirstApp = angular.module('myFirstApp',[]);
myFirstApp.controller('myController',
['$scope',function($scope){
$scope.show = false;
$scope. click= function(){
$scope.show = !$scope.show;
}	
}]);
</script>	
</body>
</html>