StackOverflow_23930210: angularjs-in-a-input-how-to-show-50-000-00-when-no-focused-but-show-50000

Illustration of answer to http://stackoverflow.com/questions/23930210/angularjs-in-a-input-how-to-show-50-000-00-when-no-focused-but-show-50000.

by ExpertSystem

HTML

<script src="http://code.angularjs.org/1.2.16/angular.min.js"></script>
<div ng-controller="myCtrl">
    <input type="text" ng-model="price" format-on-blur />
    <pre>Price: {{price}}</pre>
</div>

JavaScript

var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
});

app.directive('formatOnBlur', function ($filter, $window) {
    var toCurrency = $filter('currency');

    return {
        restrict: 'A',
        require: '?ngModel',
        link: function (scope, elem, attrs, ctrl) {
            var rawElem = elem[0];
            if (!ctrl || !rawElem.hasOwnProperty('value')) { return; }

            elem.on('focus', updateView.bind(null, true));
            elem.on('blur',  updateView.bind(null, false));
            
            function updateView(hasFocus) {
                if (!ctrl.$modelValue) { return; }
                var displayValue = hasFocus ?
                        ctrl.$modelValue :
                        toCurrency(ctrl.$modelValue);
                rawElem.value = displayValue;
            }
            updateView(rawElem === $window.document.activeElement);
        }
    };
});