Addition : i.e. 5+4+2+8+3
Subtraction : i.e. 5-4-2-8-3
Multiplication : i.e. 5*4*2*8*3
Division : i.e. 5/4/2/8/3 -- this will return float value
<!DOCTYPE html>
<html>
<head>
<title>Calculators with Filters </title>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('app',[]);
app.controller('MyCtrl',function($scope){
$scope.addTxt="1+4+5+6"
$scope.subTxt="1-4-5-6"
$scope.multTxt="1*4*5*6"
$scope.divTxt="1/4/5/6"
});
app.filter('Add',function()
{
return function(text) {
var arr = text.split("+");
var result = 0;
for(i=0;i<arr.length;i++)
result+=Number(arr[i]);
return result;
}
});
app.filter('Subtract',function()
{
return function(text) {
var arr = text.split("-");
var result = 0;
for(i=0;i<arr.length;i++)
result-=Number(arr[i]);
return result;
}
});
app.filter('Multiply',function()
{
return function(text) {
var arr = text.split("*");
var result = 1;
for(i=0;i<arr.length;i++)
result*=Number(arr[i]);
return result;
}
});
app.filter('Divide',function()
{
return function(text) {
var arr = text.split("/");
var result = 1.0;
for(i=0;i<arr.length;i++)
if(Number(arr[i])>0)
result/=Number(arr[i]);
return result;
}
});
</script>
</head>
<body>
<div id="divApp" ng-app="app">
<div ng-controller="MyCtrl">
Addition : <input type="text" ng-model="addTxt" />
Result : {{addTxt|Add}} <br />
Subtraction : <input type="text" ng-model="subTxt" />
Result : {{subTxt|Subtract}} <br />
Addition : <input type="text" ng-model="multTxt" />
Result : {{multTxt|Multiply}} <br />
Addition : <input type="text" ng-model="divTxt" />
Result : {{divTxt|Divide}} <br />
</div>
</div>
</body>
</html>
#angularjs #javascript #js #jquery #ajax #customfilter
No comments:
Post a Comment