AngularJS：在一个输入中，当没有聚焦时如何显示“ $ 50,000.00”，而在聚焦时如何显示“ 50000”？

Question

我有输入要显示格式化的数字。通常，当它没有焦点时，应该显示一个格式化的字符串，例如’$
50,000.00’。但是当它具有焦点时，它应该显示原始值，例如用于编辑的50000。

有内置功能吗？谢谢！

Answer 1

这是一条指令（formatOnBlur），它可以执行您想要的操作。
请注意，只有元素的显示值才被格式化（模型值将始终为未格式化）。

这个想法是您为focus和blur事件注册侦听器，并根据元素的焦点状态更新显示值。

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);
        }
    };
});

另请参 见此简短演示 。