Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
Selected Reading
AngularJS – ng-mousedown Directive
The ng-mousedown Directive in AngularJS basically specifies a custom event on mouse-down event. We can perform multiple functions whenever the mouse is pressed and the mouse-down event is called.
Syntax
<element ng-mousedown="expression">..content..</element>
Example − ngMousedown Directive
Create a file "ngMousedown.html" in your Angular project directory and copy-paste the following code snippet.
<!DOCTYPE html>
<html>
<head>
<title>ngMousedown Directive</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body ng-app style="text-align: center;">
<h1 style="color: green;">
Welcome to Tutorials Point
</h1>
<h2>
angularjs | ngMousedown Directive
</h2>
<div>
<p
ng-mousedown="demo={'background-color':'green','font-size':'larger'}"
ng-mouseup="demo={'font-size':''}"
ng-style="demo"
ng-class="'button'"
>
Click mouse and hold !!!
</p>
</div>
</body>
</html>
Output
To run the above code, just go to your file and run it as a normal HTML file.
Example 2
Create a file "ngMousedown.html" in your Angular project directory and copy-paste the following code snippet.
<!DOCTYPE html>
<html>
<head>
<title>ngMousedown Directive</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body ng-app style="text-align: center;">
<h1 style="color: green;">
Welcome to Tutorials Point
</h1>
<h2>
angularjs | ngMousedown Directive
</h2>
<button ng-mousedown="count = count + 1" ng-init="count=0">
Increment (on mouse down)
</button>
count: {{count}}
</body>
</html>
Output
To run the above code, just go to your file and run it as a normal HTML file. It counts the occurrence of mouse-down events.
Updated on: 2021-10-08T13:33:17+05:30
406 Views
Advertisements