AngularJSにおけるnumberパイプで数値に「桁区切り文字」を追加する方法をまとめました。
## 【はじめに】パイプとは
パイプとは、データを整形するための機能です。
| 主なパイプ | 概要 |
|---|---|
| number | 数値の桁をカンマ区切り |
| DatePipe | 日付変換(yyyy/mm/dd形式など) |
| DecimalPipe | 小数点切り捨て、零埋めうめ |
| JsonPipe | オブジェクト → JSON |
| PercentPipe | パーセント表記 |
| SlicePipe | スライス（文字列の部分抽出） |
| CurrencyPipe | 通貨書式変換 |
| UpperCasePipe, LowerCasePipe | 大文字小文字変換 |
## 【パイプ】大文字・小文字の相互変換
lowercase、uppercaseパイプを使えば、大文字・小文字の相互変換ができます。
■app/app.component.ts
import { Component } from '@angular/core';
// コンポーネントの構成情報を定義するデコレータ
@Component({
// コンポーネントの適用先を表すセレクター式
selector: 'app-root',
// コンポーネントに適用するスタイルシート
styleUrls: ['./app.component.css'],
// コンポーネントに適用するテンプレート(外部ファイルから読み込み)
templateUrl: './app.component.html',
})
export class AppComponent {
sarvant = 'Artoria';
}
■app/app.component.html
<!-- 小文字に変換 -->
<p>{{ sarvant | lowercase }}</p>
<!-- 大文字に変換 -->
<p>{{ sarvant | uppercase }}</p>
| – | 詳細記事 |
|---|---|
| 1 | ■【AngularJS】大文字・小文字の相互変換 |
## 【パイプ】数値に「桁区切り文字」を追加
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：最大桁数（小数部） |
| – | 詳細記事 |
|---|---|
| 1 | ■【AngularJS】数値に「桁区切り文字」を追加 |
## 【パイプ】オブジェクト→JSONなど
jsonパイプを使えば、JavaScriptのオブジェクトをJSON形式に変換できます。
オブジェクト→JSON
■app/app.component.ts
import { Component } from '@angular/core';
// コンポーネントの構成情報を定義するデコレータ
@Component({
// コンポーネントの適用先を表すセレクター式
selector: 'app-root',
// コンポーネントに適用するスタイルシート
styleUrls: ['./app.component.css'],
// コンポーネントに適用するテンプレート(外部ファイルから読み込み)
templateUrl: './app.component.html',
})
export class AppComponent {
// オブジェクトを作成
sarvant: any = {
name: 'アルトリア',
class: 'savar',
status: [14560, 15439],
};
}
■app/app.component.html
<pre>{{ sarvant | json }}</pre>
| – | 詳細記事 |
|---|---|
| 1 | ■【AngularJS】オブジェクトをJSONに変換 |
| – | 参考文献・関連記事 |
|---|---|
| 参考 | ■【AngularJS入門】基礎とサンプル集 |
| 関連 | ■【Ionic入門】Android・iPhoneアプリ開発編 |
コメント