AngularJS フィルター
フィルターはパイプ文字（|）を使用して式やディレクティブに追加できます。
AngularJS フィルター
AngularJS フィルターはデータの変換に使用できます：
| フィルター | 説明 |
|---|---|
| currency | 数値を通貨形式にフォーマットします。 |
| filter | 配列項目からサブセットを選択します。 |
| lowercase | 文字列を小文字にフォーマットします。 |
| orderBy | 特定の式に基づいて配列を並べ替えます。 |
| uppercase | 文字列を大文字にフォーマットします。 |
式にフィルターを追加する
フィルターは、パイプ文字（|）とフィルターを使用して式に追加できます。
（以下の2つのサンプルでは、前の章で説明した person コントローラーを使用します。）
uppercaseフィルターは文字列を大文字にフォーマットします：
AngularJS サンプル
<div ng-app="myApp" ng-controller="personCtrl">
<p>名前は{{ lastName | uppercase }}</p>
</div>
<p>名前は{{ lastName | uppercase }}</p>
</div>
試してみる »
lowercaseフィルターは文字列を小文字にフォーマットします：
AngularJS サンプル
<div ng-app="myApp" ng-controller="personCtrl">
<p>名前は{{ lastName | lowercase }}</p>
</div>
<p>名前は{{ lastName | lowercase }}</p>
</div>
試してみる »
currency フィルター
currencyフィルターは数値を通貨形式にフォーマットします：
AngularJS サンプル
<div ng-app="myApp" ng-controller="costCtrl">
<input type="number" ng-model="quantity">
<input type="number" ng-model="price">
<p>合計価格 ={{ (quantity * price) | currency }}</p>
</div>
<input type="number" ng-model="quantity">
<input type="number" ng-model="price">
<p>合計価格 ={{ (quantity * price) | currency }}</p>
</div>
試してみる »
ディレクティブにフィルターを追加する
フィルターは、パイプ文字（|）とフィルターを使用してディレクティブに追加できます。
orderByフィルターは式に基づいて配列を並べ替えます：
AngularJS サンプル
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
試してみる »
入力のフィルタリング
入力フィルターは、パイプ文字（|）とフィルターを使用してディレクティブに追加できます。フィルターの後にはコロンとモデル名が続きます。
filterフィルターは配列からサブセットを選択します：
AngularJS サンプル
<div ng-app="myApp" ng-controller="namesCtrl">
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in names | filter:test | orderBy:'country'">
{{ (x.name | uppercase) + ', ' + x.country }}
</li>
</ul>
</div>
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in names | filter:test | orderBy:'country'">
{{ (x.name | uppercase) + ', ' + x.country }}
</li>
</ul>
</div>
試してみる »
カスタムフィルター
以下のサンプルではカスタムフィルターを定義しますreverse、文字列を反転させます：
AngularJS サンプル
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.msg = "サンプル";
});
app.filter('reverse', function() { //依存関係を注入できます
return function(text) {
return text.split("").reverse().join("");
}
});
試してみる »