This example helps you known about six events in angularjs
• Mousedown event
• Mouseenter event
• Mouseleave event
• Mousemove event
• Mouseover event
• Mouseup event
Angularjs event example
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Angularjs event example</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script>
angular.module('myapp', [])
.controller('ExampleController', ['$scope', function ($scope) {
$scope.sumresult = 0;
$scope.getsum = function (intValue1, intValue2) {
$scope.sumresult = intValue1 + intValue2;
}
$scope.sumAA = $scope.getsum;
}]);
</script>
</head>
<body ng-app="myapp" ng-controller="ExampleController">
<br />
<h3>Mousedown event example</h3>
<div>
<input type="number" ng-model="n1" placeholder="number 1" /> +
<input type="number" ng-model="n2" placeholder="number 2" /> =
<input type="number" value="{{sum}}" placeholder="sum" />
<button ng-mousedown="sum = n1+ n2">
Sum (on mouse down)
</button>
</div>
<br />
<h3>Mouseenter event example </h3>
<div>
<input type="number" ng-model="n11" placeholder="number 1" /> +
<input type="number" ng-model="n22" placeholder="number 2" /> =
<input type="number" value="{{sumover}}" placeholder="sum" />
<button ng-mouseenter="sumover = n11+ n22">
Sum (on mouse enter)
</button>
</div>
<br />
<h3>Mouseleave event example </h3>
<div>
<input type="number" ng-model="n13" placeholder="number 1" /> +
<input type="number" ng-model="n23" placeholder="number 2" /> =
<input type="number" value="{{sumleave}}" placeholder="sum" />
<button ng-mouseleave="sumleave = n13+ n23">
Sum (on mouse enter)
</button>
</div>
<br />
<h3>Mousemove event example </h3>
<div>
<input type="number" ng-model="n14" placeholder="number 1" /> +
<input type="number" ng-model="n24" placeholder="number 2" /> =
<input type="number" value="{{sumonmove}}" placeholder="sum" />
<button ng-mousemove="sumonmove = n14+ n24">
Sum (when move on me)
</button>
</div>
<br />
<h3>Mouseover event example </h3>
<div>
<input type="number" ng-model="n15" placeholder="number 1" /> +
<input type="number" ng-model="n25" placeholder="number 2" /> =
<input type="number" value="{{sumonover}}" placeholder="sum" />
<button ng-mouseover="sumonover = n15+ n25">
Sum (over me to sum)
</button>
</div>
<br />
<h3>Mouseup event example </h3>
<p>Call a function when mouse up</p>
<div>
<input type="number" ng-model="n16" placeholder="number 1" /> +
<input type="number" ng-model="n26" placeholder="number 2" /> =
<input type="number" value="{{sumresult}}" placeholder="sum" />
<button ng-mouseup="getsum(n16,n26)">
Sum (mouse up me to sum)
</button>
</div>
</body>
</html>
Run it by Plunker
Thanks for your time reading
I really appreciate information shared above. It’s of great help. If someone want to learn Online (Virtual) instructor lead live training in ANGULAR JS, kindly contact us http://www.maxmunus.com/contact
ReplyDeleteMaxMunus Offer World Class Virtual Instructor led training on ANGULAR JS. We have industry expert trainer. We provide Training Material and Software Support. MaxMunus has successfully conducted 100000+ trainings in India, USA, UK, Australlia, Switzerland, Qatar, Saudi Arabia, Bangladesh, Bahrain and UAE etc.
For Demo Contact us.
Nitesh Kumar
MaxMunus
E-mail: nitesh@maxmunus.com
Skype id: nitesh_maxmunus
Ph:(+91) 8553912023
http://www.maxmunus.com/
ReplyDeleteAngularjs event example is very important, thanks
jQuery in Array
jquery find in array
inarray jquery
jquery find in array of objects
check if value exists in array javascript
jquery remove from array
jquery array push
jquery inarray object
javascript in array