Question

我有以下输入字段：

<input type="text" class="span2" ng-model="mynumber">

mynumber的值为0.55，它是从休息服务加载到页面加载的。我现在的问题是，如何格式化不同语言/国家/地区的数字？例如，在德语中，应使用逗号（,）而不是句点（.）格式化值。如果用户更改了号码，则号码应转换为.而不是,，如果我将其发送回其他服务。

这也适用于像90,000.00这样的较大数字，在德语中应为90.000,00 ...

如果我使用angular-locale_de-at.js，我可以使用以下格式在正常输出上格式化数字：

{{mynumber | number}}

但这对输入字段不起作用。

我该如何处理？应在输入字段中格式化（打印）值。

如果我将输入字段的类型设为数字

<input type="number" class="span2" ng-model="mynumber">

它适用于Chrome但不适用于IE或FF。在铬我得到0,55。但不能在其他浏览器中使用。

任何想法？

Answer 1

我写了你正在寻找的指令。请参阅the code on GitHub。

另见SO上的答案 Using AngularJS directive to format input field while leaving scope variable unchanged

它可能无法与<input type="number"/>一起使用，而是使用<input type="text"/>

Answer 2

MH，

我的第一个想法是将这些问题分开。你的一方是模型mynumber，另一方是表示。这些与我的观点截然不同。

所以你可以做的是引入一个指令（我曾经在AngularJS 1.1.5中为日期值做过这个，所以有点需要额外的黑客攻击）：

首先我们介绍一个指令：

<input type="text" class="span2" ng-model="mynumber" number-format>

代码：

var app = angular.module("your.directives", ['your.filters']);
app.directive("numberFormat", [
  '$filter', function(filter) {
    return {
      replace: false,
      restrict: "A",
      require: "?ngModel",
      link: function(scope, element, attrs, ngModel) {
        var numberFormat;
        if (!ngModel) {
          return;
        }
        ngModel.$render = function() {
          return element.val(ngModel.$viewValue);
        };
        var numberFilter = filter('myNumberFilter');
        return ngModel.$formatters.push(function(value) {
          return numberFilter(value);
        });
      }
    };
  }
]);

您需要的是一个有效的myNumberFilter过滤器，它可以根据给定的语言（但是您确定这一点）决定如何格式化输入值。

编辑：我注意到，AngularJS有自己的数字过滤器，所以我更改了名字。让我们自己添加：

var app = angular.module("your.filters", []);

app.filter("myNumberFilter", ['SiteLanguage', 
  function(siteLanguage) {
    return function(number) {
      var language = siteLanguage.getLanguage(); //I assume you have a service that can tell you the current language
      switch(language) {
          case "de":
          // return the variant of number for "de" here
          break;
          case "fr":
          // return the variant of number for "fr" here
          break;
          default:
          // return english variant here.
          break;
        };
    }
  ]
});

您可能需要为各个国家/地区设置格式化程序功能（而不是盲目地依赖angular locale。而您可能需要一个服务SiteLanguage，它将为您提供当前网站上的语言。< / p>

希望这会有所帮助：）

输入字段编号格式AngularJS

2 个答案: