AngularJs ng-mousedown


The ng-mousedown directive is used to define an angular mousedown event.

If you want to add and fire a mousedown event on HTML button that time we need to use these events.

When you mousedown on button in the below example, the ngMousedown function get called.  

As you can see in the below controller function " mousedown " get called after ngMousedown on button.

<button ng-mousedown="mousedown()">ng-mousedown on this Button </button>

The example as,
//The AngularJs code sample
 var app = angular.module('myApp', []);
 app.controller('ngClickCtrl', function ($scope) {
            $scope.firstName = "Anil";
            $scope.lastName = "Singh";
            $scope.IsActive = false;

            $scope.mousedown = function () {
                $scope.IsActive = true;
          };
 });

//The Full live demo (HTML+Angular) code sample
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>What is ng-mousedown directive? Why we use it?</title>
    @*<script src="https://code.angularjs.org/1.4.1/angular.js"></script>*@
    <script>
        var app = angular.module('myApp', []);
        app.controller('ngClickCtrl', function ($scope) {
            $scope.firstName = "Anil";
            $scope.lastName = "Singh";
            $scope.IsActive = false;

            $scope.mousedown = function () {
                $scope.IsActive = true;                
            };
        });
    </script>
</head>
<body ng-app="myApp">
    <div ng-controller="ngClickCtrl">
        <div>
            First Name:
            <input type="text" ng-model="firstName"> Last Name:
            <input type="text" ng-model="lastName">
            <div ng-show="IsActive"> <h3>Full Name: {{firstName + " " + lastName}} </h3></div>
        </div>
        <div>
            <button ng-mousedown="mousedown()">NG-MOUSEDOWN </button>
        </div>
    </div>
</body>
</html>

The live output,

About Blogger

ANIL SINGH

Hey! I am Anil Singh. I am Active Blogger, Writer and Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
http://www.code-sample.com
http://www.code-sample.xyz

    Blogger Comment
    Facebook Comment

0 comments:

Post a Comment

SQL Server NodeJs TypeScript JavaScript Angular SQL Server My Book