Here we will learn what ng-mouseup event directive in angularjs, use of angularjs ng-mouseup event directive and call or raise functions / events on ng-mouseup event with example in angularjs application.
In angularjs ng-mouseup event directive is used to raise an events / functions whenever mouse clicked and released from html elements.
The ng-mouseup event in angularjs will fire an events immediately whenever mouse click and released from elements.
Suppose in angularjs if we want to raise an event / function whenever we did mouse click and released from html elements then it’s better to use ng-mouseup event.
Following is the syntax of using angularjs ng-mouseup event directive in applications.
<element ng-mouseup="expression">
--Your Code--
</element>
In angularjs whenever mouse click finished then ng-mouseup event will fire and execute expression and ng-mouseup event will work with all html elements.
The ng-mouseup event in angularjs will not override onmouseup event of html elements both will execute separately.
Following is the example to raise custom function whenever mouse clicked on html element by using ng-mouseup event in angularjs application.
<!DOCTYPE html>
<html>
<head>
<title>
AngularJs ng-mouseup Event with Example
</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('ngmouseupApp', []);
app.controller('ngmouseupCtrl', function ($scope) {
$scope.count = 0;
$scope.getdetails = function () {
$scope.count = $scope.count + 1;
}
});
</script>
</head>
<body>
<div ng-app="ngmouseupApp" ng-controller="ngmouseupCtrl">
<h2>AngularJS ng-mouseup Event Example</h2>
<input type="button" value="Hover and Click Me" ng-mouseup="getdetails()" /><br /><br />
<span style="color:Red">No. of Times MouseUp Event Fired: {{count}}</span>
</div>
</body>
</html>
If you observe above angularjs ng-mouseup event example we are calling function getdetails() in ng-mouseup event and showing number of times mouseup event fired whenever mouse clicked on html elements.
Following is the result of using ng-mouseup event in angularjs applications.
This is how we can use ng-mouseup event in angularjs applications to raise events whenever mouse clicked on html elements.