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

另见这个简短的演示.

Answer 2

您正在寻找ngModel.$ parsers和ngModel.$ formatters.

我整理了一个简单的演示:

http://jsfiddle.net/BuriB/nD2tk/

  angular.module('app', [])
      .controller('TestCntrl', function TestCntrl ($scope) {
        $scope.value = 50000;
      })
      .directive('numberFormatter', ['$filter', function ($filter) {
        var decimalCases = 2,
            whatToSet = function (str) {
              /**
               * TODO:
               * don't allow any non digits character, except decimal seperator character
               */
              return str ? Number(str) : '';
            },
            whatToShow = function (num) {
              return '$' + $filter('number')(num, decimalCases);
            };

        return {
          restrict: 'A',
          require: 'ngModel',
          link: function (scope, element, attr, ngModel) {
            ngModel.$parsers.push(whatToSet);
            ngModel.$formatters.push(whatToShow);

            element.bind('blur', function() {
              element.val(whatToShow(ngModel.$modelValue))
            });
            element.bind('focus', function () {
              element.val(ngModel.$modelValue);
            });
          }
        };
      }]);

另见@Eric Hannum的这个工作演示.