Ng-Mouseleave-7

 

Example of Ng-Mouseleave

 
 
 
<!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>
Output