AngularJS - age formatter and percent formatter

by Krzysztof Safjanowski

HTML

<div ng-app="ageFormatter">
    <div ng-controller="ageFormatter">age: {{ age }}
        <br />
        <input type="text" ng-model="age" age-formatter />
    </div>
    <div ng-controller="improvementFormatter">improvement: {{ improvement }}
        <br />
        <input type="text" ng-model="improvement" improvement-formatter />
    </div>
</div>

JavaScript

angular.module('ageFormatter', [])
    .controller('ageFormatter', function ($scope) {
    $scope.age = 512;
})
    .controller('improvementFormatter', function ($scope) {
    $scope.improvement = 0.52;
})
    .directive('ageFormatter', function ($filter) {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attr, ngModel) {
            ngModel.$parsers.unshift(function (value) {
                return parseFloat(parseFloat(value).toFixed(1));
            });

            element.bind('blur', function () {
                scope.$apply(function () {
                    element.val(ngModel.$modelValue);
                });
            });
        }
    };
}).directive('improvementFormatter', function ($filter) {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attr, ngModel) {
            ngModel.$parsers.unshift(function (value) {
                return parseFloat(parseFloat(value).toFixed(1));
            });

            element.bind('blur', function () {
                scope.$apply(function () {
                    element.val(ngModel.$modelValue);
                });
            });
        }
    };
});