Angular: Empty Fiddle
http://angularjs.org/
HTML
<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/accounting.js/0.4.1/accounting.js"></script>
<div ng-controller="MyCtrl" ng-app="myApp">
<input ng-model="var.value" currencyformat/>
<br />
<p>Try to enter a number less than a thousand.</p>
<p>(I call the <b>format function onBlur</b> and call <b>unformat function onFocus</b> so the error occurs everytime <b>onBlur</b> is called)</p>
<br /><br /><br />
Results:
<br /><br />
Raw value <br />
<b>{{var.value}} </b>
<br /><br />
Formatted Value <br />
<b>{{var.value | currency}}</b>
<br /> <br />
Formatted value with calculations <br />
<b>{{var.value * 2 | currency}}</b>
</div>
JavaScript
var myApp = angular.module('myApp',['ui.numeric']);
angular.module('ui.numeric', []).directive('currencyformat', function() {
return {
require: 'ngModel',
restrict: 'A',
link: function(scope, element, attrs, modelCtrl) {
scope.$watch(element, function() {
onBlur();
});
element.bind('focus', function(){
onFocus();
});
element.bind('blur', function(){
onBlur();
});
function onFocus(){
var plainNumber = accounting.unformat(element.val())
if(plainNumber == "0") plainNumber = "";
modelCtrl.$setViewValue(plainNumber);
modelCtrl.$render();
scope.$apply();
}
function onBlur(){
var plainNumber = accounting.unformat(element.val())
var formatted_number = accounting.formatMoney(element.val(),"", 2,",",".","%s%v");
modelCtrl.$viewValue = formatted_number;
modelCtrl.$render();
setTimeout(function(){scope.$apply();},100);
}
}
};
}).filter("currency", function() {
return function(number, currencyCode) {
var currency = {
USD: "$",
RUB: ""
},
thousand = ",", decimal = ".", format = "%s%v";
return accounting.formatMoney(number, currency[currencyCode], 2, thousand, decimal, format);
};
});
function MyCtrl($scope) {
$scope.var = {"value":123000.36222222,"value2":2222};
}