AngularJS ng-mouseup Event Directive

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.

AngularJS ng-mouseup Event Directive

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.

Syntax of AngularJS 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.

Example of AngularJS ng-mouseup Event

Following is the example to raise custom function whenever mouse clicked on html element by using ng-mouseup event in angularjs application.

 

Live Preview

<!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.

Output of AngularJS ng-mouseup Event Example

Following is the result of using ng-mouseup event in angularjs applications.

 

Angularjs ng-mouseup event directive example output or result

 

This is how we can use ng-mouseup event in angularjs applications to raise events whenever mouse clicked on html elements.