AngularJS - Currency formatted input
HTML
<section data-ng-app="test" data-ng-controller="TestController as test">
<label for="testInput">Test:</label>
<input id="testInput" type="text" data-ng-model="test.money" data-blur-currency />
<p data-ng-bind="test.money"></p>
<button data-ng-click="test.randomMoney()">Update</button>
</section>
JavaScript
(function () {
'use strict';
function TestController() {
var test = this;
test.money = 100000;
test.randomMoney = function () {
test.money = Math.random() * 100000;
};
}
function blurCurrency($filter) {
function link(scope, el, attrs, ngModelCtrl) {
function formatter(inputValue) {
if (inputValue == undefined || inputValue == "" || inputValue.length == 0) inputValue = "0";
var transformedInput = inputValue.toString().replace(/[^0-9]/g, '');
transformedInput = parseInt(transformedInput);
if (!transformedInput)
{
transformedInput = "0"
}
var transformedInput = transformedInput.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1.");
el.val(transformedInput);
ngModelCtrl.$setViewValue(inputValue);
return inputValue.toString().replace(/[^0-9]/g, '');
}
ngModelCtrl.$formatters.push(formatter);
el.bind('focus', function () {
// el.val('');
});
el.bind('keyup', function () {
formatter(el.val());
});
}
return {
require: '^ngModel',
scope: true,
link: link
};
}
blurCurrency.$inject = ['$filter'];
angular.module('test', [])
.controller('TestController', TestController)
.directive('blurCurrency', blurCurrency);
})();