Currency input type with Angular
An Anjular JS directive which process currency values
HTML
<script src="http://code.angularjs.org/1.1.0/angular.min.js"></script>
<div ng-app="miniapp">
<div ng-controller="Ctrl">
<form ng-submit="enterCurrency()">
<input type="text" ng-model="money" currency-input size="30" placeholder="insert currency value"></input>
</form>
</div>
</div>
JavaScript
var $scope;
var app = angular.module('miniapp', []);
function Ctrl($scope) {
$scope.currencyVal;
}
app.directive('currencyInput', function() {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attrs, ctrl) {
return ctrl.$parsers.push(function(inputValue) {
var inputVal = element.val();
//clearing left side zeros
while (inputVal.charAt(0) == '0') {
inputVal = inputVal.substr(1);
}
inputVal = inputVal.replace(/[^\d.\',']/g, '');
var point = inputVal.indexOf(".");
if (point >= 9) {
inputVal = inputVal.slice(3, point + 3);
}
var decimalSplit = inputVal.split(".");
var intPart = decimalSplit[0];
var decPart = decimalSplit[1];
intPart = intPart.replace(/[^\d]/g, '');
if (intPart.length > 3) {
var intDiv = Math.floor(intPart.length / 3);
while (intDiv > 0) {
var lastComma = intPart.indexOf(".");
if (lastComma < 0) {
lastComma = intPart.length;
}
if (lastComma - 3 > 0) {
intPart = intPart.slice(0, lastComma - 3) + "." + intPart.slice(lastComma - 3);
}
intDiv--;
}
}
if (decPart === undefined) {
decPart = "";
}
else {
decPart = "." + decPart;
}
var res = intPart + decPart;
if (res != inputValue) {
ctrl.$setViewValue(res);
ctrl.$render();
}
});
}
};
});