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

另见此 short demo .