Description :
Ng-init intialize the value of count to 0.Count is increase by 1 each time when we up the mouse from button.
<!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>
<button ng-mouseup="count = count + 1" ng-init="count=0">
Increment (when mouse is up)
</button>
count: {{count}}
</div>
</body>
</html>
Description :
We display alphabets from A to Z using ng-repeat directive.When mouse up event will fire then the style that is bind to ng-mouseup event will apply on alphabet means alphabets reamins in original position.
<!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" ng-init="genetareLetter()">
<span ng-repeat="p in ltrs"><i ng-mouseup="style={}" ng-mousedown="style={color:'blue','background-color':'gray','font-size':'20px', 'cursor':'pointer'}" ng-style="style">{{p}},</i></span>
</div>
<script>
var app = angular.module("app", []);
app.controller('controllerName', ['$scope', function ($scope) {
$scope.ltrs = [];
$scope.genetareLetter = function () {
var letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
for (i = 0; i < letters.length; i++) {
$scope.ltrs.push(letters[i]);
}
};
}]);
</script>
</body>
</html>
Description :
When mouseup event is fire on array elements then mouseOver(p) function will call and display particular element below on which event is fire.
<!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">
<div ng-repeat="p in Arrs">
<div style="background-color:tomato;height:30px;width:100px" ng-mouseup="mouseOver(p)">{{p}}</div><br />
</div>
<pre>Mouse Over <b>{{data}}</b></pre>
</div>
<script>
var app = angular.module("app", []);
app.controller('controllerName', ['$scope', function ($scope) {
$scope.mouseOver = function (data) {
$scope.data = data;
};
$scope.Arrs = ["First", "Second", "Third", "Fourth"]
}]);
</script>
</body>
</html>
Description :
There are elements of array.The element on which mouseup event is fire the style which is bind to ng-mouseup directive will apply that is empty style means element comes in their original color.
<!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>
<style>
.nav {
padding: 10px;
cursor: pointer;
background-color: lightgray;
border-bottom: 5px solid black;
}
</style>
</head>
<body ng-app="app">
<div ng-controller="controllerName">
<span class="nav" ng-repeat="p in nav" ng-style="style" ng-mouseup="style={}" ng-mousedown="style={'border-bottom': '5px solid red','background-color':'pink','cursor':'pointer'}">{{p}}</span>
</div>
<script>
var app = angular.module("app", []);
app.controller('controllerName', ['$scope', function ($scope) {
$scope.nav=["Home","About","Contact"];
}]);
</script>
</body>
</html>
Description :
In this example of Ng-Mouseup, We have a button with ng-mouseup and ng-mouseleave, Which will show the price on clicking it. See the code:
<!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>
<style type="text/css">
.price {
border: 1px solid black;
width: 149px;
margin-left: 84px;
margin-top: -35px;
background-color: steelblue;
border-radius: 4px;
height: 22px;
color: white;
}
</style>
</head>
<body ng-app="">
<div ng-init="tooltip=false">
<br />
<br />
<p>Mouse up to show price</p>
<button ng-mouseup="price=true" ng-mouseleave="price=false">
Show Price
</button>
<div class="price" ng-show="price">Price : $230.00</div>
</div>
</body>
</html>
Description :
In this example of Ng-Mouseup, We have img.selected as false bydefault and on ng-mouseup the value of it will be set to true. See the code:
<!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 class="container">
<div class="row" ng-controller="myController">
<div class="col-md-3"></div>
<div class="col-md-6 well">
<h3>Select Images On Mouse Up</h3>
<div class="row text-center">
<div class="col-md-4" style="margin-bottom:20px;" ng-repeat="img in images" ng-mouseup="style={ 'height': '90px', 'width': '140px' };img.selected=true">
<div class="row">
<img ng-style="style" ng-src="{{img.path}}" />
</div>
<div class="row">
<img ng-hide="img.selected" height="30" width="30" src="http://learnit.visrosoftware.com/datafiles/unchecked.png" />
<img height="30" width="30" ng-show="img.selected" src="http://learnit.visrosoftware.com/datafiles/checked.png" />
</div>
</div>
</div>
</div>
<div class="col-md-3"></div>
</div>
</div>
<script>
var app = angular.module("app", []);
app.controller('myController', ['$scope', function ($scope) {
$scope.style = { 'height': '100px', 'width': '150px' };
$scope.images = [{ id: '1', path: 'http://learnit.visrosoftware.com/datafiles/win1.png', selected: false },
{ id: '2', path: 'http://learnit.visrosoftware.com/datafiles/win2.jpg', selected: false },
{ id: '3', path: 'http://learnit.visrosoftware.com/datafiles/win3.jpg', selected: false }];
}]);
</script>
</body>
</html>
Description :
Example of Ng-Mouseup:
<!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="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="">
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6 well">
<div class="row text-right">
<div class="col-md-12">
<button ng-mouseup="sampleText=true" class="btn btn-success">Mouseup To Show</button>
</div>
</div>
<div class="row" ng-show="sampleText" ng-init="sampleText=false">
<div class="col-md-12">
<h3>Lorem Ipsum</h3>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like
Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
</div>
</div>
<div class="col-md-3"></div>
</div>
</div>
</body>
</html>
Description :
Example of Ng-Mouseup:
<!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">
.lock {
opacity: 0.2;
}
</style>
</head>
<body ng-app="app">
<div class="container">
<div class="row" ng-controller="myController">
<div class="col-md-12">
<table class="table table-striped">
<thead>
<tr>
<th>Mouseup to Delete and Undo button</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in records" style="cursor:pointer">
<td ng-class={'true':'lock'}[row.hide]> {{row.text}} </td>
<td style="width:100px;">
<button ng-mouseup="row.hide=true" class="btn btn-danger btn-xs">
<span class="glyphicon glyphicon-remove"></span>
</button><button ng-mouseup="row.hide=false" class="btn btn-success btn-xs">
<span class="glyphicon glyphicon-repeat"></span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script>
var app = angular.module("app", []);
app.controller('myController', ['$scope', function ($scope) {
$scope.records = [{ hide: false, text: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.when an unknown printer took a galley of type and scrambled it to make a type specimen book.' },
{ hide: false, text: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.when an unknown printer took a galley of type and scrambled it to make a type specimen book.' },
{ hide: false, text: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.when an unknown printer took a galley of type and scrambled it to make a type specimen book.' },
{ hide: false, text: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.when an unknown printer took a galley of type and scrambled it to make a type specimen book.' }]
}]);
</script>
</body>
</html>