Hi when I am using span tags I can apply the money filter like
<div ng-repeat="item in items">
<span>
{{item.cost | currency}}
</span>
</div>
I am wondering how I can apply same currency filter in input tag. i.e
<div ng-repeat="item in items">
<input type="text" ng-model="item.cost | currency" />
</div>
When I try to apply currency filter to the input field as above it doesnt work. Please let me know how to apply currency filter to input field. Thanks
I created a simple directive that handles formatting input fields. Here is a jsfiddle example. To use it add this to your existing code.
<div ng-repeate="item in items">
<input type="text" ng-model="item.cost" format="currency" />
</div>
And add this directive to your code.
// allow you to format a text input field.
// <input type="text" ng-model="test" format="number" />
// <input type="text" ng-model="test" format="currency" />
.directive('format', ['$filter', function ($filter) {
return {
require: '?ngModel',
link: function (scope, elem, attrs, ctrl) {
if (!ctrl) return;
ctrl.$formatters.unshift(function (a) {
return $filter(attrs.format)(ctrl.$modelValue)
});
elem.bind('blur', function(event) {
var plainNumber = elem.val().replace(/[^\d|\-+|\.+]/g, '');
elem.val($filter(attrs.format)(plainNumber));
});
}
};
}]);
return $filter(attrs.format)(ctrl.$modelValue) to return $filter(attrs.format)(ctrl.$modelValue, attrs.format == 'currency' ? '€' : null) to add the € symbol instead of the default $.
Unfortunately you can not format using ng-model. At least not that way. You will need to create your own directive that implements a parser and formatter. Here is a similar question.
There is a pretty good directive our there that does that currently: ngmodel-format
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example52-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.14/angular.min.js"></script>
</head>
<body ng-app="">
<script>
function Ctrl($scope) {
$scope.amount = 1234.56;
}
</script>
<div ng-controller="Ctrl">
<input type="number" ng-model="amount"> <br>
default currency symbol ($): <span id="currency-default">{{amount | currency}}</span> <br>
custom currency identifier (USD$): <span>{{amount | currency:"USD$"}}</span>
</div>
</body>
</html>
I think you don't need to apply the filter in your input, because in your input you don't need formated currency, take a look at this page https://docs.angularjs.org/api/ng/filter/currency this is the official help for angular currency filter.
If you are using bootstrap, you can use one of these controls http://getbootstrap.com/components/#input-groups-basic I hope this help.
You can create directive and apply formatting on value and on blur you can set that formatted value to input.
<input format-currency amount="amount">
angular.module('app', [])
.controller('myCtrl', function($scope) {
$scope.amount = 2;
})
.directive('formatToCurrency', function($filter){
return {
scope: {
amount : '='
},
link: function(scope, el, attrs){
el.val($filter('currency')(scope.amount));
el.bind('focus', function(){
el.val(scope.amount);
});
el.bind('input', function(){
scope.amount = el.val();
scope.$apply();
});
el.bind('blur', function(){
el.val($filter('currency')(scope.amount));
});
}
}
});
I found ng-currency to work very well for currency inputs. It supports locale-based decimals and thousands separators, and allows a variable number of decimal digits.
<input type="text" model="yourModel" ng-currency />
Installation - mat currency-format
$ npm i mat-currency-format
Description The directive can be used in html input to automatically change the input to locale currency.
<input type="text"
mvndrMatCurrencyFormat
[allowNegative]="false"
[currencyCode]="'USD'"
[value]="usAmount"
(blur)="updateUSAmount($event)" />
hope this will help, Cheers !
I wrote this directive and it helped me to format currency values. I hope it helps someone.
.directive('numericOnly', function(){
return {
require: 'ngModel',
link: function(scope, element, attrs, modelCtrl) {
var regex = /^[1-9]\d*(((.\d{3}){1})?(\,\d{0,2})?)$/;
modelCtrl.$parsers.push(function (inputValue) {
var transformedInput = inputValue;
if (regex.test(transformedInput)) {
console.log('passed the expression...');
modelCtrl.$setViewValue(transformedInput);
modelCtrl.$render();
return transformedInput;
} else {
console.log('did not pass the expression...');
transformedInput = transformedInput.substr(0, transformedInput.length-1);
modelCtrl.$setViewValue(transformedInput);
modelCtrl.$render();
return transformedInput;
}
});
}
};
});
ng-model-bound property as anumbertype the entire time. npmjs.com/package/ng-input-currency