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 。

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

另请参阅此 Working Demo by @Eric Hannum 。

Answer 3

你可以使用ng-focus为你的模型应用滤镜/转换，使其成为原始值和ng-blur，使其成为格式化部分的格式化值，我担心你必须构建你的拥有过滤器。我不知道有任何现有人来执行这项操作，尽管可能有。

Answer 4

myApp.directive('myField',function($filter){
  return {
            restrict: 'E',
            require: '?ngModel',
            scope : true,
            template: '<input type="text" ng-focus="clearFormat()" ng-blur="formatField()"/>',
            link : function (scope, element, attrs,ctrl){
                var field = element.find('input');
                ctrl.$render = function() {
                    field.val($filter('currency')(ctrl.$viewValue));
                };
                scope.clearFormat = function(){
                   field.val(ctrl.$viewValue);
                }
                scope.formatField = function(){
                   field.val($filter('currency')(ctrl.$viewValue));
                }
                function updateViewValue() {
                    scope.$apply(function() {
                        ctrl.$setViewValue(field.val());
                    });
                }

                field.on('change', updateViewValue);
            }
        };
})

在html中

 <my-field ng-model="amount"></my-field>

仅当您使用角度1.2或更高时，此功能才有效。否则，您需要通过自己的

实现ng-focus和ng-blur

Answer 5

<!doctype html>
<html lang="en">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
</head>
<body ng-app="app" ng-controller="TestCntrl">
    <input type="text" id="exampleInput" name="input" ng-model="value" number-formatter decimal="'0'" /><br />
    <strong>value in the model:</strong> {{value}}
</body>
</html>

lists

AngularJS：在输入中如何显示$ 50,000.00＆＃39;当没有专注但显示＆＃39; 50000＆＃39;聚焦时？

5 个答案: