一尘不染

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

angularjs

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

有内置功能吗?谢谢!


阅读 248

收藏
2020-07-04

共1个答案

一尘不染

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

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

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

另请参 见此简短演示

2020-07-04