LearnKode

8 Example(s) of Ng-Mousedown


Description :

Textbox value show below because it is bind to name variable.When we mouse down(click) on the ng-mousedown text it will display the alert.


Ng-Mousedown Example - 1 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="app">
    <div ng-controller="controllerName">
        Your name: <input type="text" ng-model="name" />
        <hr />
        <p ng-mousedown="name='World'">Hello {{name || "World"}}!</p>
        <div style="border:1px solid red;" ng-mousedown="alert()">
            ng-mousedown
        </div>
    </div>
<script>
    var app = angular.module("app", []);
    app.controller('controllerName', ['$scope', function ($scope) {
        $scope.alert = function () {
            alert("Example of ng-mousedown.");
        }
    }]);
</script>
</body>
</html>
Try it » Download Example »

Output

Description :

In this example of Ng-Mousedown directive when your mouse button pressed in the sqaure then the co-ordinates of the mouse position will show below it as soon as the mouse down event fire.


Ng-Mousedown Example - 2 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="app">
    <div ng-controller="controllerName">
        <p>Mouse Down on the square</p>
        <div style="width:100px;height:100px; background-color:gray;" ng-mousedown="mouseDown($event)"></div>
        <pre ng-show="X">Mouse enter at:{{X}},{{Y}}</pre>
    </div>
<script>
    var app = angular.module("app", []);
    app.controller('controllerName', ['$scope', function ($scope) {
        $scope.mouseDown = function (event) {
            $scope.X = event.clientX;
            $scope.Y = event.clientY;
        }
    }]);
</script>
</body>
</html>
Try it » Download Example »

Output

Description :

When we mouse down on the button it will increase the count by 1.


Ng-Mousedown Example - 3 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app>
    <div>
        <div ng-init="c=1">
            <button ng-mousedown="c=c+1">Mouse Down</button><br />
            Counter = {{c}}
        </div>
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

On mouse down event the font and color of text will change and come to original state when mouse is up.


Ng-Mousedown Example - 4 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app>
    <div>
        <p ng-mousedown="myStyle={'color':'red','font-size':'larger'}" ng-mouseup="myStyle={'font-size':''}" ng-style="myStyle" ng-class="'button'">Mousedown then fonts will be thick.</p>
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

On ng-mousedown event it will display alert with textbox value because textbox is bind to mouseDown variable.


Ng-Mousedown Example - 5 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="app">
    <div ng-controller="controllerName">
        Mouse Down: <input type="text" ng-mousedown="alert()" ng-model="mouseDown" />
    </div>
<script>
    var app = angular.module("app", []);
    app.controller('controllerName', ['$scope', function ($scope) {
        $scope.mouseDown = 'LearnIt';
        $scope.alert = function () {
            alert($scope.mouseDown);
        }
    }]);
</script>
</body>
</html>
Try it » Download Example »

Output

Description :

On ng-mousedown event style of mousedown will apply on div element that is green color and white text and other style will apply on mouseup event.


Ng-Mousedown Example - 6 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <style type="text/css">
        .mousedown {
            background-color: darksalmon;
        }
    </style>
</head>

<body ng-app="app">
    <div ng-controller="controllerName">
        <div class="container">
            <br />
            <div class="row">
                <div class="col-md-12 ">
                    <div class="mousedown well" ng-style="style" ng-mousedown="style={'background-color':'plum','color':'kyan'};val='fired.'" ng-mouseup="style={'background-color':'tomato','color':'gray'};val=' will fire'"><h3>Mouse down event {{val}}</h3></div>
                </div>
            </div>
        </div>
    </div>
<script>
    var app = angular.module("app", []);
    app.controller('controllerName', ['$scope', function ($scope) {
    }]);
</script>
</body>
</html>
Try it » Download Example »

Output

Description :

Ng-Mousedown-7


Ng-Mousedown Example - 7 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="app">
    <div ng-controller="myController">
        <div class="container">
            <div class="row text-center">
                <div class="col-md-12">
                    <br />
                    <button ng-disabled="load" ng-mousedown="getData()" class="btn btn-success">Mousedown to load data</button>
                    <br />
                    <br />
                    <div>
                        <img ng-show="loading" height="200" width="200" src="http://learnit.visrosoftware.com/datafiles/loading (1).gif" />
                        <div ng-show="load">
                            <p>
                                LearnIT is a website for Beginner and Professional to learn
                                AngularJS step by step and the biggest advantage is that while learning you can
                                experiment your code Online.
                            </p>
                            <p>Contact Us</p>
                            <p>[email protected] </p>
                            <p>Panchkula, India</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<script>
    var app = angular.module("app", []);
    app.controller('myController', ['$scope', '$timeout', function ($scope, $timeout) {
        $scope.loadData = function () {
            $scope.loading = false;
            $scope.load = true;
        };
        $scope.getData = function () {
            $scope.loading = true;
            $timeout(function () {
                $scope.loadData();
            }, 3000);
        };
    }]);
</script>
</body>
</html>
Try it » Download Example »

Output

Description :

Ng-Mousedown-8


Ng-Mousedown Example - 8 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style type="text/css">
    .fade {
        margin: 0 !important;
        position: relative;
        top: 44px;
        z-index: 9999;
        -webkit-transition: height 3s ease-in-out;
        transition: all 3s ease-in-out;
        height: 0;
        opacity: 0;
    }

        .fade.active {
            height: 500px;
            opacity: 1;
        }
</style>
</head>
<body ng-app="">
    <div class="container">
        <div class="row well text-center">
            <div class="col-md-12">
                <br />
                <button ng-mousedown="showImage=true" ng-mouseup="showImage=false" class="btn btn-success">Mouse Down & Hold To See Clear Picture</button>
                <br />
                <div class="fade" ng-class="{'active':showImage}">
                    <img height="450" width="400" src="http://learnit.visrosoftware.com/datafiles/win2.jpg" />
                </div>
            </div>
        </div>
    </div>
</body>
</html>
Try it » Download Example »

Output