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">
<input ng-model="var.value" class="integers" symbol="°" />
<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 />
Result:
<br />
{{numbericVal * 2}}
</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() {
var formatted_number = accounting.formatMoney(element.val(),"", 2,",",".","%s%v");
modelCtrl.$setViewValue(formatted_number);
modelCtrl.$render();
});
element.bind('blur', function() {
var formatted_number = accounting.formatMoney(element.val(),"", 2,",",".","%s%v");
modelCtrl.$setViewValue(formatted_number);
modelCtrl.$render();
scope.$apply();
});
element.bind('focus', function() {
var plainNumber = accounting.unformat(element.val())
if(plainNumber == "0") plainNumber = "";
modelCtrl.$setViewValue(plainNumber);
modelCtrl.$render();
scope.$apply();
console.log("I am focused!")
});
}
};
});
function MyCtrl($scope) {
$scope.var = {"value":1000.36};
$scope.$watch('var.value', function(val) {
$scope.numbericVal = accounting.unformat(val);
});
}