AngularJS | ng-mouseup Directive

The ng-mouseup Directive in AngularJS is used to apply custom behavior when an mouseup event occurs on a specific HTML element. It can be used to show popup alert when mouse button is pressed. It is supported by all HTML elements.

Syntax:

 <element ng-mouseup="expression"> Contents... </element> 

Example 1: This example uses ng-mouseup Directive to change the text effect.



filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:
After leaving the element:
ngmouseup
After clicking the element:
ngmouseup

Example 2: This example uses ng-mouseup Directive to display the array element.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:
Before clicking the element:
ngmousedown
After clicking the element:
ngmousedown



My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.