Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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
362 Views
Advertisements