Angular: Empty Fiddle
http://angularjs.org/
HTML
<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl">
<input ng-model="var.value" class="integers" symbol="°" />
<br /><br />
{{var | json}}
</div>
JavaScript
var myApp = angular.module('myApp',['ui.numeric']);
angular.module('ui.numeric', []).directive('integers', function() {
return {
require: 'ngModel',
restrict: 'EACM',
link: function(scope, element, attrs, modelCtrl) {
scope.$watch(element, function() {
modelCtrl.$setViewValue(setFormatting(element.val(), attrs.symbol));
modelCtrl.$render();
});
element.bind('blur', function() {
modelCtrl.$setViewValue(setFormatting(element.val(), attrs.symbol));
modelCtrl.$render();
});
}
};
});
function setFormatting(parsedInput, symbol) {
var decimalSplit = parsedInput.split(".");
var intPart = decimalSplit[0];
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.splice(lastComma - 3, 0, ","); }
intDiv--;
}
}
if (intPart === "") { intPart = "0"; }
if (symbol === null || symbol === undefined) { return (intPart); }
else if (symbol === "%" || symbol === "°") { return (intPart + symbol); }
else { return (symbol + intPart); }
}
String.prototype.splice = function(idx, rem, s) {
return (this.slice(0, idx) + s + this.slice(idx + Math.abs(rem)));
};
function MyCtrl($scope) {
$scope.var = {"value":4};
}