AngularJS ng-mouseup Directive Last Updated : 24 Aug, 2022 Comments Improve Suggest changes Like Article Like Report 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= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </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= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </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: Comment More infoAdvertise with us Next Article AngularJS ng-mouseup Directive V Vishal Chaudhary 2 Follow Improve Article Tags : Web Technologies AngularJS AngularJS-Directives Similar Reads AngularJS ng-mousedown Directive The ng-mousedown Directive in AngularJS is used to apply custom behavior when mousedown event occurs on a specific HTML element. It can be used to show a popup alert when the mouse button is pressed down. It is supported by all HTML elements. Syntax: <element ng-mousedown="expression"> Content 1 min read AngularJS ng-mousemove Directive The ng-mousemove Directive in AngularJS is used to apply custom behavior when mousemove event occurs on a specific HTML element. It can be used to display a popup alert when the mouse moves over a specific HTML element. It is supported by all HTML elements. Syntax:<element ng-mousemove="expressio 2 min read AngularJS ng-mouseover Directive The ng-mouseover Directive in AngularJS is used to apply custom behavior when a mouseover event occurs on a specific HTML element. It can be used to show a popup alert when the mouse moves over a specific element. It is supported by all HTML elements. Syntax: <element ng-mouseover="expression" 2 min read AngularJS ng-keyup Directive The ng-keyup Directive in AngluarJS is used to apply custom behavior on a keyup event. It is supported by <input>, <select> and <textarea> elements. Syntax: <element ng-keyup="expression"> Contents... </element> Parameter: expression: When a keypress is finished, then t 2 min read AngularJS ng-focus Directive The ng-focus Directive in AngluarJS is used to apply custom behavior when an element is focused. It can be used to show/hide some element or it can pop up an alert when an element is being focused. It is supported by <a>, <input>, <select> and <textarea> elements. Syntax: 1 min read Like