Angular: Empty Fiddle
http://angularjs.org/
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<div ng-controller="MyCtrl">
<div>Raw Value: {{currencyVal}}</div>
<div>Filtered Value: {{currencyVal | number}}</div>
<form name="myForm">
<input type='text' name="myInput" fraction="4" ng-required="true" numeric-input = "" ng-model = "currencyVal" />
<button ng-disabled="myForm.$invalid">submit</button>
</form>
</div>
JavaScript
var myApp = angular.module('myApp', []);
myApp.run(function($locale){
$locale.NUMBER_FORMATS.GROUP_SEP = "'";
});
myApp.controller('MyCtrl', function($scope, $locale) {
$scope.currencyVal = 123456;
});
myApp.directive('numericInput', function($filter, $browser, $locale) {
return {
require: 'ngModel',
link: function($scope, $element, $attrs, ngModelCtrl) {
var replaceRegex = new RegExp($locale.NUMBER_FORMATS.GROUP_SEP, 'g');
var fraction = $attrs.fraction || 2
var listener = function() {
var value = $element.val().replace(replaceRegex, '')
$element.val($filter('number')(value, fraction))
}
// This runs when we update the text field
ngModelCtrl.$parsers.push(function(viewValue) {
var newVal = viewValue.replace(replaceRegex, '');
var newValAsNumber = newVal * 1;
// check if new value is numeric, and set control validity
if (isNaN(newValAsNumber)){
ngModelCtrl.$setValidity(ngModelCtrl.$name+'Numeric', false);
}
else{
newVal = newValAsNumber.toFixed(fraction);
ngModelCtrl.$setValidity(ngModelCtrl.$name+'Numeric', true);
}
return newVal;
})
// This runs when the model gets updated on the scope directly and keeps our view in sync
ngModelCtrl.$render = function() {
$element.val($filter('number')(ngModelCtrl.$viewValue, fraction))
}
$element.bind('change', listener);
$element.bind('keydown', function(event) {
var key = event.keyCode
// If the keys include the CTRL, SHIFT, ALT, or META keys, home, end, or the arrow keys, do nothing.
// This lets us...