AngularJS Event Directives |
---|
ng-blur |
ng-change |
ng-click |
ng-copy |
ng-cut |
ng-dblclick |
ng-focus |
ng-keydown |
ng-keyup |
ng-keypress |
ng-mousedown |
ng-mouseenter |
ng-mouseleave |
ng-mousemove |
ng-mouseover |
ng-mouseup |
<button ng-click="clickCounter=clickCounter + 1">Click Here!</button>
<h4>Total clicks : {{ clickCounter }}</h4>
<!DOCTYPE html>
<html>
<head>
<title>AngularJS ng-click Event</title>
<script type="text/javascript" src="js/angular.min.js"></script>
</head>
<body>
<div ng-app="">
<button ng-click="clickCounter=clickCounter + 1">Click Here!</button>
<h4>Total clicks : {{ clickCounter }}</h4>
</div>
</body>
</html>
angulaJS important mouse event directives are : ng-mouseenter
and ng-mouseleave
.
In the below example, the ng-class
directive includes map of CSS classes, so color_1 will be applied if enter=true and color_2 will be applied if leave=true. The ng-mouseenter
directive sets 'enter' to true, which will apply color_1 class to the <div> element. In the same way, ng-mouseleave
will set leave to true, which will apply color_2 class.
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Mouse Event</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<style>
.color_1 {
width: 150px;
height: 150px;
border-radius:100px;
background-color:#0099da;
padding:2px 2px 2px 2px;
color:#FFF;
}
.color_2 {
width: 150px;
height: 150px;
border-radius:100px;
background-color:#F60;
padding:2px 2px 2px 2px;
color:#000;
}
.padding{ padding:40px 0px 0px 20px;}
</style>
</head>
<body ng-app>
<h2>Mouse Events : </h2>
<div ng-class="{color_1: enter, color_2: leave}"
ng-mouseenter="enter=true;leave=false;"
ng-mouseleave="leave=true;enter=false">
<h3 class="padding">
Mouse <span ng-show="enter">Enter</span>
<span ng-show="leave">Leave</span>
</h3>
</div>
</body>
</html>