LearnKode

8 Example(s) of Ng-Mouseleave


Description :

Count value increase each time by 1 when we leave the mouse from button.


Ng-Mouseleave 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>
    <div>
        <input type="button" value="Mouse Move" ng-mouseleave="count=count+1" />
        {{count}}
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

when we over the mouse on text,the color of text changes to red because isShow variable is true.When we leave mouse then text become in original color because value of isShow variable is false.


Ng-Mouseleave Example - 2 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
        .red {
            color: red;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app>
    <div>
        <p> Mouse Leave on the text</p>
        <div ng-mouseleave="isShow=false" ng-class="{'red':isShow}" ng-mouseover="isShow=true"> Name:John <span ng-show="isShow">Age:29</span></div>
        <div ng-mouseleave="Show=false" ng-class="{'red':Show}" ng-mouseover="Show=true"> Name:Clark <span ng-show="Show">Age:26</span></div>
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

When we over the mouse on link,true value of isPopUp variable is assign to ng-show directive which will show the elements of popUp object and when we leave mouse from the link it will hide the elements because false value of isPopUp is assign to ng-show directive.


Ng-Mouseleave 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="app">
    <div ng-controller="controllerName">
        <a href="" ng-mouseover="isPopUp=true;" ng-mouseleave="isPopUp=false;">
            Link
        </a>
        <div ng-show="isPopUp"><span> {{ popUp.title }}</span> {{ popUp.message }}</div>
    </div>
    <script>
    var app = angular.module("app", []);
    app.controller('controllerName', ['$scope', function ($scope) {
        $scope.popUp = {
            title: 'Title',
            message: 'Message'
        };
    }]);
</script>
</body>
</html>
Try it » Download Example »

Output

Description :

There is array of alphabets and A is shown at first time.When we leave the mouse from alphabet it will show the next alphabets on which alphabet we leave the mouse.


Ng-Mouseleave 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="app">
    <div ng-controller="controllerName">
        <p>Mouse leave on letter</p>
        <div style="width:100px">
            <p ng-mouseleave="count=count==25?count=0:count=count+1" style="margin-top: -30px; font-size: 180px; color:{{Colors[count]}}">{{arr[count-0]}}</p>
        </div>
    </div>
    <script>
    var app = angular.module("app", []);
    app.controller('controllerName', ['$scope', function ($scope) {
        $scope.arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
        $scope.Colors = ["aqua", "tomato", "beige", "tan", "blue", "brown", "cyan","darkblue", " darkcyan", " darkgrey", "darkgreen",
  " darkkhaki", " darkmagenta", "darkolivegreen", "darkorange", "darkorchid", "darkred", " darksalmon", " darkviolet", " gold", " green", "indigo", " khaki", " lightblue", "lightcyan", "lightgreen", " lightgrey"];
    }]);
</script>
</body>
</html>
Try it » Download Example »

Output

Description :

Array of object elements shown using ng-repeat directive.On mouse leave event hoverEdit variable value is false which is assign to ng-show directive means Edit link is hide when we leave mouse from element.


Ng-Mouseleave 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">
        <b>Mouse Leave event</b><br />
            <div ng-repeat="task in tasks" ng-mouseover="hoverEdit=true" ng-mouseleave="hoverEdit=false">
                {{task.name}}
                <span ng-show="hoverEdit">
                    <a href="javascript:void(0)"><b>Edit</b></a> 
                </span>
            </div>
    </div>
    <script>
    var app = angular.module("app", []);
    app.controller('controllerName', ['$scope', function ($scope) {
        $scope.tasks = [{ name: 'Angular' }, { name: 'Bootstrap' }, { name: 'JQuery' }, { name: 'JavaScript' }]
    }]);
</script>
</body>
</html>
Try it » Download Example »

Output

Description :

Example of Ng-Mouseleave and Ng-MouseEnter See the code:


Ng-Mouseleave 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">
</head>
<body ng-app="app">
    <div ng-controller="myController">
        <div class="container">
            <div class="row well">
                <h2>Mouse enter and leave in the table row</h2>
                <table class="table">
                    <tbody>
                        <tr ng-repeat="d in [1,2,3,4,5,6,7]" ng-mouseleave="style={}" ng-mouseenter="style={'background-color':'#5CB85C','color':'white'}" ng-style="style">
                            <td>{{data}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <script>
        var app = angular.module("app", []);
        app.controller('myController', ['$scope', function ($scope) {
            $scope.data = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's, a galley of type and scrambled it to make a type specimen book.";
        }]);
    </script>
</body>
</html>
Try it » Download Example »

Output

Description :

Example of Ng-Mouseleave


Ng-Mouseleave 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">
    <style type="text/css">
        .control-label {
            text-align: left !important;
        }

        .amount {
            font-size: 16px;
        }
    </style>
</head>
<body ng-app="">
    <div class="container">
        <div class="row">
            <div class="col-md-offset-3 well col-md-6 form-horizontal">
                <h3>Mouse enter to change amount and leave </h3>
                <div class="row form-group">
                    <div class="col-md-4 control-label">Amount :</div>
                    <div class="col-md-4 control-label" ng-hide="AmountEdit" ng-mouseenter="AmountEdit=true"><span class="amount">$ {{Amount}}</span></div>
                    <div class="col-md-3" ng-show="AmountEdit" ng-mouseleave="AmountEdit=false">
                        <input type="number" class="form-control" ng-model="Amount" ng-init="Amount=230" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

Ng-Mouseleave-8


Ng-Mouseleave 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">
        .control-label {
            text-align: left !important;
        }
    </style>
</head>
<body ng-app="">
    <div class="container">
        <div class="row">
            <div class="col-md-offset-3 well col-md-6 form-horizontal">
                <h3>Comment Section</h3>
                <div class="row form-group">
                    <div class="col-md-4 control-label">Name :</div>
                    <div class="col-md-8">
                        <input type="text" ng-style="style1" class="form-control" ng-mouseleave="style1={}" ng-mouseenter="style1={'background-color':'lightblue'}" />
                    </div>
                </div>
                <div class="row form-group">
                    <div class="col-md-4 control-label">Mobile Number :</div>
                    <div class="col-md-8">
                        <input type="text" ng-style="style2" class="form-control" ng-mouseleave="style2={}" ng-mouseenter="style2={'background-color':'lightblue'}" />
                    </div>
                </div>
                <div class="row form-group">
                    <div class="col-md-4 control-label">Email Id :</div>
                    <div class="col-md-8">
                        <input type="text" ng-style="style3" class="form-control" ng-mouseleave="style3={}" ng-mouseenter="style3={'background-color':'lightblue'}" />
                    </div>
                </div>
                <div class="row form-group">
                    <div class="col-md-4 control-label">Comment :</div>
                    <div class="col-md-8">
                        <textarea rows="8" ng-style="style4" class="form-control" ng-mouseleave="style4={}" ng-mouseenter="style4={'background-color':'lightblue'}"></textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
Try it » Download Example »

Output