More than 5 years have passed since last update.

Angularのtranslateでの$filterの使い方

Last updated at 2019-12-07Posted at 2019-12-07

Angular1での多言語対応における自分用メモです。
#$filterを使いたい
テンプレートでfilterを使用したいときは以下のように使います。
この$filterによって、「2000」を「2,000」とします。

<span>{{price | number}}</span>

#翻訳をしてみる
JSONをまずは用意。日本語はja.json、英語はen.jsonなどとします。

{
	"TEST": "It will be {{amount}} yen"
}

テンプレ側を用意。

<div ng-bind-html="'TEST' | translate"></div>

ちなみにこの結果はこのようになります。

It will be yen

変数を適用したい場合には、テンプレ側に記述します。他にやり方はありますが、ここではこの場合での$filterを適用したいと思います。

<div ng-bind-html="'TEST' | translate:'{amount: "price"}'"></div>

It will be 2000 yen

ここに$filterのnumberを適用したい。となった時、テンプレ側に記述してもやり方が悪いのか適用されません。
調べていてもよくわからなかったのですが、なんか閃きました。JSON側です。

{
	"TEST": "It will be {{amount | number}} yen"
}

It will be 2,000 yen

これで色んなfilterを適用できるぞー！