我有输入要显示格式化的数字。通常,当它没有焦点时,应该显示一个格式化的字符串,例如’$ 50,000.00’。但是当它具有焦点时,它应该显示原始值,例如用于编辑的50000。
有内置功能吗?谢谢!
这是一条指令(formatOnBlur),它可以执行您想要的操作。 请注意,只有元素的显示值才被格式化(模型值将始终为未格式化)。
formatOnBlur
这个想法是您为focus和blur事件注册侦听器,并根据元素的焦点状态更新显示值。
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); } }; });
另请参 见此简短演示 。