AngularJS ng-mouseup Directive
The ng-mouseup Directive in AngularJS is used to apply custom behavior when a mouseup event occurs on a specific HTML element. It can be used to show a popup alert when the mouse button is pressed. The order of a mouse click is Mousedown, Mouseup, Click. It is supported by all HTML elements.
Syntax:
<element ng-mouseup="expression">
Contents...
</element>
Parameter value:
- expression: When the mouse click is completed then the expression will be executed.
Example 1: This example uses the ng-mouseup Directive to change the text effect.
HTML
<!DOCTYPE html>
< html >
< head >
< script src =
</ script >
< title >ng-mouseup Directive</ title >
</ head >
< body ng-app style = "text-align:center" >
< h1 style = "color:green" >GeeksforGeeks</ h1 >
< h2 >ng-mouseup Directive</ h2 >
< div >
< p ng-mouseup="geek={'color':'green',
'font-size':'larger'}"
ng-mousedown = "geek={'font-size':''}"
ng-style = "geek"
ng-class = "'button'" >
Hold mouse click to see effect.
</ p >
</ div >
</ body >
</ html >
|
Output:
Example 2: This example uses the ng-mouseup Directive to display the array element.
HTML
<!DOCTYPE html>
< html >
< head >
< script src =
</ script >
< title >ng-mouseup Directive</ title >
</ head >
< body ng-app = "app" style = "padding:20px" >
< h1 style = "color:green" >GeeksforGeeks</ h1 >
< h2 >ng-mouseup Directive</ h2 >
< div ng-controller = "app" >
< div ng-repeat = "p in array" >
< div style="background-color:green;
color:white;
height:30px;
width:10%"
ng-mouseup = "mouseOver(p)" >{{p}}
</ div >< br >
</ div >
< pre >You just clicked: < b >{{input}}</ b ></ pre >
</ div >
< script >
var app = angular.module("app", []);
app.controller('app', ['$scope', function ($scope) {
$scope.mouseOver = function (data) {
$scope.input = data;
};
$scope.array = ["First", "Second"]
}]);
</ script >
</ body >
</ html >
|
Output:
Last Updated :
24 Aug, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...