AngularJSのビルトインのフィルターfilter、orderByで属性名を指定する以外に関数や式を指定する事も出来ます。式や関数を指定し、カスタマイズする方法をまとめました。
デモとコードサンプルはこちら。
AngularJSのビルトインのフィルターfilter、orderByで属性名を指定する以外に関数や式を指定する事も出来ます。式や関数を指定し、カスタマイズする方法をまとめました。
デモとコードサンプルはこちら。
※目次をクリックすると目次の下部にコンテンツが表示されます。
filterで関数を使用
1)filterで関数を使用する場合の書式
{{ filter_expression | filter:関数名 }}
・filter_expression
フィルター対象の配列データを示す式。
・filter:関数名
入力の配列データの各要素に対して関数が呼び出され、この関数にはfunction(value, index)のように各配列要素の値とインデックスが引数として渡されます。
2)サンプル
下記例では、myScores配列内の国語(jpn)、算数(math)、理科(sci)の得点の合計が180以上のデータのみをフィルタリングして表示しています。
(HTML)
<tr ng-repeat=”myScore in myScores | filter:selectPass”>
(スクリプト)
$scope.selectPass = function (item) {
if ((item.jpn + item.math + item.sci) > 180 ) {
return item;
}
};
{{ filter_expression | filter:関数名 }}
・filter_expression
フィルター対象の配列データを示す式。
・filter:関数名
入力の配列データの各要素に対して関数が呼び出され、この関数にはfunction(value, index)のように各配列要素の値とインデックスが引数として渡されます。
2)サンプル
下記例では、myScores配列内の国語(jpn)、算数(math)、理科(sci)の得点の合計が180以上のデータのみをフィルタリングして表示しています。
(HTML)
<tr ng-repeat=”myScore in myScores | filter:selectPass”>
(スクリプト)
$scope.selectPass = function (item) {
if ((item.jpn + item.math + item.sci) > 180 ) {
return item;
}
};
orderByで式を指定して、項目クリックでソート
下記例では、orderByにsortClmを指定し、表の項目名をクリックするとその項目を使ってソートできるようにしています。
<table class=”table”>
<thead>
<tr>
<th><a href=”” ng-click=”sortClm = ‘day’; reverse=!reverse”>日時</a></th>
<th><a href=”” ng-click=”sortClm = ‘jpn’; reverse=!reverse”>国語</a></th>
<th><a href=”” ng-click=”sortClm = ‘math’; reverse=!reverse”>算数</a></th>
<th><a href=”” ng-click=”sortClm = ‘sci’; reverse=!reverse”>理科</a></th>
<th>平均</th>
</tr>
</thead>
<tbody>
<tr ng-repeat=”myScore in myScores | orderBy:sortClm:reverse”>
<td>{{myScore.day}}</td>
:
<table class=”table”>
<thead>
<tr>
<th><a href=”” ng-click=”sortClm = ‘day’; reverse=!reverse”>日時</a></th>
<th><a href=”” ng-click=”sortClm = ‘jpn’; reverse=!reverse”>国語</a></th>
<th><a href=”” ng-click=”sortClm = ‘math’; reverse=!reverse”>算数</a></th>
<th><a href=”” ng-click=”sortClm = ‘sci’; reverse=!reverse”>理科</a></th>
<th>平均</th>
</tr>
</thead>
<tbody>
<tr ng-repeat=”myScore in myScores | orderBy:sortClm:reverse”>
<td>{{myScore.day}}</td>
:
orderByで関数を使用
下記例では、価格の昇順でソートしていますが、在庫がゼロの商品は最下部に表示するように関数を定義しています。
(HTML)
<tr ng-repeat=”item in products | orderBy:customOrder”>
(スクリプト)
$scope.customOrder = function (item) {
return item.stock == 0 ? 99999 : item.price;
};
$scope.products = [
{name: “デジタルカメラA”,price: 8500,stock:3},
{name: “デジタルカメラD”,price: 3500,stock:0},
{name: “パソコンB”,price: 15900,stock:6},
{name: “デジタルカメラB”,price: 9800,stock:3},
{name: “パソコンD”,price: 5900,stock:0},
{name: “パソコンC”,price: 25900,stock:1},
{name: “パソコンA”,price: 14900,stock:10}
];
(HTML)
<tr ng-repeat=”item in products | orderBy:customOrder”>
(スクリプト)
$scope.customOrder = function (item) {
return item.stock == 0 ? 99999 : item.price;
};
$scope.products = [
{name: “デジタルカメラA”,price: 8500,stock:3},
{name: “デジタルカメラD”,price: 3500,stock:0},
{name: “パソコンB”,price: 15900,stock:6},
{name: “デジタルカメラB”,price: 9800,stock:3},
{name: “パソコンD”,price: 5900,stock:0},
{name: “パソコンC”,price: 25900,stock:1},
{name: “パソコンA”,price: 14900,stock:10}
];
AngularJSの特徴、仕組み
ビルトインディレクティブ
- ビルトインのディレクティブの概要
- データバインディングのディレクティブの概要
- ng-repeatを使ってリスト、テーブル、フィルター
- ng-includeを使って別のHTMLファイルを埋め込み
- ng-switchを使って内部にあるHTMLテンプレートの表示を切り替え
- ng-if、ng-show、ng-hideを使って表示、非表示を切り替え
- ng-class、ng-styleを使ってCSSを設定
- イベント処理
- 有効、無効を切替えるディレクティブ
- フォームの入力チェックを行い、動的にCSS追加
- ng-optionsを使ってSelectメニューを作成
- ng-repeatを使ってラジオボタンを作成
- ビルトインのフィルターの使用方法
- ビルトインのフィルターで関数を使用
- カスタムフィルターの使用方法
- Bootstrap3を使ってページング
- スクリプト内でフィルターを使用、既存のフィルターを拡張
サービス
- サービスの概要とfactory、service、providerの使い分け
- $qサービスでpromise/deferredパターン
- $httpサービスの概要、サーバーからJSONデータ取得
- $httpサービスのPOSTでデータ送信
- $qサービスを使ってhttpリクエストを複数実行
- $httpサービスのinterceptorの使用方法
- AngularJSのwithCredentialsの設定、CORS
- $timeoutサービスと$intervalサービス
- $resourceサービスを使ってREST
- $locationサービスを使ってURLを操作
- $routeサービスと$resourceサービスを使ったサンプルを作成
- routeChangeSuccessを使ってflashメッセージ表示
- JavaScript、CSSを含むHTMLデータをバインドして表示
カスタムディレクティブ
AngularJSの特徴、仕組み
ビルトインディレクティブ
- ビルトインのディレクティブの概要
- データバインディングのディレクティブの概要
- ng-repeatを使ってリスト、テーブル、フィルター
- ng-includeを使って別のHTMLファイルを埋め込み
- ng-switchで内部にあるHTMLテンプレートの表示を切り替え
- ng-if、ng-show、ng-hideを使って表示、非表示を切り替え
- ng-class、ng-styleを使ってCSSを設定
- イベント処理
- 有効、無効を切替えるディレクティブ
- フォームの入力チェックを行い、動的にCSS追加
- ng-optionsを使ってSelectメニューを作成
- ng-repeatを使ってラジオボタンを作成
- ビルトインのフィルターの使用方法
- ビルトインのフィルターで関数を使用
- カスタムフィルターの使用方法
- Bootstrap3を使ってページング
- スクリプト内でフィルターを使用、既存のフィルターを拡張
サービス
- サービスの概要とfactory、service、providerの使い分け
- $qサービスでpromise/deferredパターン
- $httpサービスの概要、サーバーからJSONデータ取得
- $httpサービスのPOSTでデータ送信
- $qサービスを使ってhttpリクエストを複数実行
- $httpサービスのinterceptorの使用方法
- AngularJSのwithCredentialsの設定、CORS
- $timeoutサービスと$intervalサービス
- $resourceサービスを使ってREST
- $locationサービスを使ってURLを操作
- $routeサービスと$resourceサービスを使ったサンプルを作成
- routeChangeSuccessを使ってflashメッセージ表示
- JavaScript、CSSを含むHTMLデータをバインドして表示
カスタムディレクティブ