【AngularJS】数値に「桁区切り文字」を追加

AngularJSにおけるnumberパイプで数値に「桁区切り文字」を追加する方法をまとめました。

【パイプ】数値に「桁区切り文字」を追加

numberパイプを使えば、数値に「桁区切り文字」を追加できます。

■app/app.component.ts

import { Component } from '@angular/core';

// コンポーネントの構成情報を定義するデコレータ
@Component({
  // コンポーネントの適用先を表すセレクター式
  selector: 'app-root',

  // コンポーネントに適用するスタイルシート
  styleUrls: ['./app.component.css'],

  // コンポーネントに適用するテンプレート(外部ファイルから読み込み)
  templateUrl: './app.component.html',
})

export class AppComponent {
  point = '114514';
}

■app/app.component.html

<!-- カンマ区切り -->
<p>{{ point | number }}</p>

<!-- 桁数指定 -->
<p>{{ point | number : '8.1-2' }}</p>

■実行結果

114,514

00,114,514.0

書式

value | number [: info]
パラメータ 説明
value 任意の数値
info 桁数情報(minInt.minFrac-maxFrac形式の文字列で指定)
minInt:最小桁数(整数部)、minFrac:最小桁数(小数部)、maxFrac:最大桁数(小数部)
参考文献・関連記事
参考 【AngularJS入門】基礎とサンプル集
関連 【Ionic入門】Android・iPhoneアプリ開発編
関連記事