javascript - angular.js - 通貨記号と 10 進数をスパンでラップする

Question

角度でこのようなことをすることはできますか?

タグなどを解析しないため、これを行うことはまったく不可能です

{{ 10000 | currency:"<span>$</span>" }}

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

どういうわけか10進数を分離することは言うまでもありません..

理想的な結果は

1 000 000<span class="dec">,00</span><span class="cur">€&lt;/span>

フィルター設定を行うことは実際には不可能です..?

angular の通貨フィルターとformatNumber関数を変更しようとすることはできますが、それでもスパン要素ではなくテキストとして使用されます。

// 編集して実際にこれを行うことができますhttp://plnkr.co/edit/dcEhHi8sp43564ZvC4D1?p=preview

<p ng-bind-html-unsafe="10000 | currency:'<span>$</span>'"></p>

小数についてはまだ無知ですが

Answer 1

カスタムフィルターを作成できます

app.filter('euro', function () {
    return function (text) {
        text = text.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1 ");
        var t = text + '<span class="desc">,00</span><span class="cur">€&lt;/span>';
        return t;
    };
});

<span ng-bind-html-unsafe="1000000 | euro"></span>

結果は次のようになります。

1 000 000,00€

Working Demo

(正規表現は、@Paul Creasey の回答に投稿されていますhttps://stackoverflow.com/a/1990554/304319 )

Answer 2

実際にこれを行うことは可能です

<p ng-bind-html-unsafe="10000 | currency:'<span>$</span>'"></p>

または、このようにネイティブの通貨フィルターをラップします

app.filter('currencys', ['$filter', '$locale', 
    function($filter, $locale) {
        return function (num) {
            var sym = $locale.NUMBER_FORMATS.CURRENCY_SYM;
            return $filter('currency')(num, '<span>'+ sym +'</span>');
        };
    }
]);

そして、このように使用します

<span ng-bind-html-unsafe="10000 | currencys"></span>

Answer 3

ロケールによっては、通貨記号が接頭辞、接尾辞が付いているものがあります。たとえば、"100 ユーロ" は "€ 100" または "100 €" と表示されます。じゃあ何？

ただし、解析を行うことを気にしない場合は、以下をお読みください。

この$localeサービスには、通貨の書式設定に必要な記号が含まれています。

$locale.NUMBER_FORMATS.CURRENCY_SYM
$locale.NUMBER_FORMATS.DECIMAL_SEP

（そして、より詳細な情報があり$locale.NUMBER_FORMATS.PATTERNS[]ます-位置の値[1]は通貨用です）

currencyフィルタを使用して最初のフォーマットされた文字列を取得するディレクティブを作成できます。たとえば"1 000 000,50 €"、 を検索し$locale.NUMBER_FORMATS.CURRENCY_SYMて置換し<span>{{ $locale.NUMBER_FORMATS.CURRENCY_SYM }}</span>、小数点に同様の処理を行いinnerHTML、要素の を設定します。