4
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-07-28

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に渡したほうがいいかもしれない

4
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?