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 では動作しません。クロムでは0,55になります。しかし、他のブラウザではそうではありません。

何か案は？

4

2 に答える 2

1

私はあなたが探しているディレクティブを書きました。GitHub のコードを参照してください。

SO Using AngularJS ディレクティブで入力フィールドをフォーマットし、スコープ変数を変更しないで、この回答も参照してください。

では動作しない可能性があります。代わり<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 に答える