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アプリ開発編 |
コメント