AngularJS处理格式化的数字输入

Question

如何允许像"1200"这样的值出现在角度的数字字段中？

我的用户做了很多值的复制/粘贴，他们喜欢整个数字格式。问题是，角度input[type=number]的默认设置将在其中一个格式化值粘贴回时引发错误

这里有一个从这个页面分叉的plunk：

http://plnkr.co/edit/rcTrGHb9asRu4tIKPou8?p=preview

请注意，当您复制一个格式化的值（比如它以1200开头）并将其粘贴回输入框时，它会断开。

我该如何最好地处理这件事？这似乎是以前会处理的事情，但我很难追踪到任何事情。我不需要任何结实的东西。我可以修改输入文本以删除格式，并且我可以采用标准的en-us格式。

Answer 1

您可以在常规输入（type=text）字段上有一个自定义指令，将数据格式化为始终为的数字

你的指令看起来像

angular.module('myApp').directive('myDirective', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModelController) {
      ngModelController.$parsers.push(function(data) {
        //convert data from view format to model format
        return data; //converted
      });
      ngModelController.$formatters.push(function(data) {
        //convert data from model format to view format
        return data; //converted
      });
    }
  }
});

源

Answer 2

这是我使用的解决方案：

app.directive('appType', function () {
  return {
    require: 'ngModel',
    link: function (scope, elem, attrs, ctrl) {
      // Custom number validation logic.
      if (attrs.appType === 'number') {
        return ctrl.$parsers.push(function (value) {
          var v = value.replace(/,/g,''),
              valid = v == null || isFinite(v);
          ctrl.$setValidity('number', valid);
          return valid && v != null ? Number(v) : undefined;
        });
      }
    }
  };
});

这要归功于我使用您的所有反馈找到的链接：http://blakeembrey.com/articles/angular-js-number-validation-bug/

更新的plunker：http://plnkr.co/edit/rcTrGHb9asRu4tIKPou8?p=preview