Using Angular parsers and formatters to format input numbet

by Tarek Faham

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.no-icons.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css">
<script src="http://code.angularjs.org/1.1.0/angular.min.js"></script>
<div ng-controller="fessCntrl">Example
    <input type="text" ng-model="test" format="number" /> <pre>{{test|json}}</pre>

</div>

JavaScript

var fessmodule = angular.module('myModule', []);

fessmodule.controller('fessCntrl', function ($scope) {
    $scope.test = 123456879;

});

fessmodule.$inject = ['$scope'];


fessmodule.directive('format', ['$filter', function ($filter) {
    return {
        require: '?ngModel',
        link: function (scope, elem, attrs, ctrl) {
            if (!ctrl) return;


            ctrl.$formatters.unshift(function (a) {
                return $filter(attrs.format)(ctrl.$modelValue)+"y"
            });

						var stopRecursion = false;
            ctrl.$parsers.push(function (viewValue) {
            	if (stopRecursion) {
              	return viewValue;
              }
            	//debugger;
              	stopRecursion = true;
                var plainNumber = viewValue.replace(/[^\d|\-+|\.+]/g, '');
                //elem.val($filter(attrs.format)(plainNumber)+"x");
                var theNewValue = $filter(attrs.format)(plainNumber)+"x";
                ctrl.$setViewValue(theNewValue);
                ctrl.$render();
                stopRecursion = false;
                return plainNumber;
            });
        }
    };
}]);