TypeScript
AngularJS
Angular2
Angular4

Angular(2以降)で数値を桁区切りで表示させたり、小数点以下の桁数表示を指定する

More than 1 year has passed since last update.

htmlに渡す数値のデータを桁区切りで表示させたい場合

<p>{some_variable | number}</p>

このようにすれば、some_variable=1192の場合、1,192と表示される

また、小数点についてはnumberを使った場合デフォルトでは小数点以下3桁まで表示されるが、これを例えば2桁にしたい場合については

<p>{some_variable | number:'1.2-2'}</p>

このようにすれば、some_variable=3.141592の場合は3.14と表示される



numberに与えるオプションについては以下のようになっている
number:`{表示する最小桁数(整数)}.{表示する最小桁数(小数点以下)}-{表示する最大桁数(小数点以下}`

なので、some_variable=3.111の場合に

<p>{some_variable | number:'1.0-2'}</p>
<p>{some_variable | number:'1.5-10'}</p>
<p>{some_variable | number:'2.0-0'}</p>

このようにすると結果としては以下のようになる

3.11
3.11100
03

ただしブラウザによってはnumberが適用されずに変数に入っている素の値がそのまま表示されることもあるっぽい
なので、厳密に表示させたい場合はcomponentかserviceの中で処理して、それをhtmlに渡したほうがいいかもしれない