2

我有以下输入字段：

<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。在 chrome 中我得到 0,55。但在其他浏览器中没有。

有任何想法吗？

4

2 回答 2

1

我已经写了你正在寻找的指令。请参阅GitHub 上的代码。

另请参阅 SO Using AngularJS directive to format input field while leave scope variable不变的这个答案

它可能不适用于<input type="number"/>，请<input type="text"/>改用

于 2015-04-22T12:35:04.163 回答
0

嗯，

我的第一个想法是在这里分离关注点。您在一侧拥有模型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将为您提供当前站点上的语言。

希望这可以帮助 ：）

于 2013-10-24T09:14:49.853 回答