Angular: smart-float
HTML
<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div ng-controller="MyCtrl">
<form name="myForm" class="form-horizontal" role="form" novalidate>
<div class="form-group" ng-class="{'has-error': myForm.inputAmount.$invalid}">
<label for="inputText3" class="col-sm-2 control-label">Amount</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputAmount" name="inputAmount" placeholder="Amount" ng-model="amount" smart-float />
<span class="help-block" ng-show="myForm.inputAmount.$error.float">
Invalid Amount!
</span>
{{amount}}
</div>
</div>
</form>
</div>
JavaScript
var myApp = angular.module('myApp',[]);
myApp.directive('smartFloat', function ($filter) {
var FLOAT_REGEXP_1 = /^\$?\d+.(\d{3})*(\,\d*)$/; //Numbers like: 1.123,56
var FLOAT_REGEXP_2 = /^\$?\d+,(\d{3})*(\.\d*)$/; //Numbers like: 1,123.56
var FLOAT_REGEXP_3 = /^\$?-?\d+(\.\d*)?$/; //Numbers like: 1123.56
var FLOAT_REGEXP_4 = /^\$?\d+(\,\d*)?$/; //Numbers like: 1123,56
return {
require: 'ngModel',
link: function (scope, elm, attrs, ctrl) {
ctrl.$parsers.unshift(function (viewValue) {
if (FLOAT_REGEXP_1.test(viewValue)) {
ctrl.$setValidity('float', true);
return parseFloat(viewValue.replace('.', '').replace(',', '.'));
} else if (FLOAT_REGEXP_2.test(viewValue)) {
ctrl.$setValidity('float', true);
return parseFloat(viewValue.replace(',', ''));
} else if (FLOAT_REGEXP_3.test(viewValue)) {console.log('in 3');
ctrl.$setValidity('float', true);
return parseFloat(viewValue);
} else if (FLOAT_REGEXP_4.test(viewValue)) {
ctrl.$setValidity('float', true);
return parseFloat(viewValue.replace(',', '.'));
}else {
ctrl.$setValidity('float', false);
return undefined;
}
});
ctrl.$formatters.unshift(
function (modelValue) {
return $filter('number')(parseFloat(modelValue) , 2);
}
);
}
};
});
function MyCtrl($scope) {
$scope.amount = 0;
}