AngularJS | Directiva ng-mouseup

La directiva ng-mouseup en AngularJS se usa para aplicar un comportamiento personalizado cuando ocurre un evento mouseup en un elemento HTML específico. Se puede usar para mostrar una alerta emergente cuando se presiona el botón del mouse. Es compatible con todos los elementos HTML.

Sintaxis:

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

Ejemplo 1: este ejemplo utiliza la directiva ng-mouseup para cambiar el efecto de texto.

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

Salida:
Después de dejar el elemento:
ngmouseup
Después de hacer clic en el elemento:
ngmouseup

Ejemplo 2: este ejemplo utiliza la directiva ng-mouseup para mostrar el elemento de array.

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

Salida:
Antes de hacer clic en el elemento:
ngmousedown
Después de hacer clic en el elemento:
ngmousedown

Publicación traducida automáticamente

Artículo escrito por Vishal Chaudhary 2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *