AngularJSのng-repeatを使ってリストやテーブルを作成する方法、ng-repeatで表示した内容をAngularJSのフィルターを使ってフィルタリングして表示する方法をまとめました。
デモとコードサンプルはこちら。
※目次をクリックすると目次の下部にコンテンツが表示されます。
ng-repeatを使って表を作成
以下に作成例を示します。
①スクリプトにテーブルで表示するデータを定義
①スクリプトにテーブルで表示するデータを定義
$scope.people = [ { name: "相田", age: 20}, { name: "伊藤", age: 55}, { name: "上野", age: 20}, { name: "江藤", age: 37}, { name: "岡田", age: 20}, { name: "加藤", age: 32} ];
②スクリプトで定義したデータモデル($scope.people)に対しng-repeatディレクティブを適用し、テーブルを生成
<table class="table"> <thead> <tr><th>名前</th><th>年齢</th></tr> </thead> <tbody> <tr ng-repeat="person in people"> <td>{{person.name}}</td> <td>{{person.age}}</td> </tr> </tbody> </table>
ng-repeatのビルトイン変数を使用する例
ng-repeatは、指定したコレクション(上記例では$scope.people)をループ処理する際、下記ビルトイン変数にも自動で値が割当てられる。
$index:ループで現在処理されているオブジェクトのオフセット番号。(0~コレクション長-1)
$first:ループ処理で先頭のオブジェクトの場合はtrue。
$last:ループ処理で先頭、最後以外のオブジェクトの場合はtrue。
$even:ループ処理で$indexが偶数のオブジェクトの場合はtrue。
$odd:ループ処理で$indexが奇数のオブジェクトの場合はtrue。
上記ビルトイン変数を使って、表に行番号を追加し、背景色をストライプにするサンプルの作成例を示します。
$index:ループで現在処理されているオブジェクトのオフセット番号。(0~コレクション長-1)
$first:ループ処理で先頭のオブジェクトの場合はtrue。
$last:ループ処理で先頭、最後以外のオブジェクトの場合はtrue。
$even:ループ処理で$indexが偶数のオブジェクトの場合はtrue。
$odd:ループ処理で$indexが奇数のオブジェクトの場合はtrue。
上記ビルトイン変数を使って、表に行番号を追加し、背景色をストライプにするサンプルの作成例を示します。
<tbody> <tr ng-repeat="person in people" ng-class="$odd ? 'bg-success' : 'bg-warning'"> <td>{{$index + 1}}</td> <td>{{person.name}}</td> <td>{{person.age}}</td> </tr> </tbody>
※’bg-success’、’bg-warning’
Bootstrap3で定義されているCSSクラス。
※ng-class=”$odd ? ‘bg-success’ : ‘bg-warning’
AngularJSのng-classディレクティブを使って、ng-repeatのビルトイン変数$oddがtrueの場合は’bg-success’のCSSクラス、falseの場合は’bg-warning’のCSSクラスを適用し、テーブルの各行毎に背景色を変えています。
ng-repeatを入力文字列でフィルター
AngularJSのビルトインのフィルター機能を使用してng-repeatの表示内容をフィルタリングする例です。
フィルター:<input ng-model="query" type="text" placeholder="表示したい名前、住所、年齢を入力" autofocus> <ul> <li ng-repeat="person in people | filter: query | orderBy: 'name' ">{{person.name}} ({{person.age}}) {{person.address}}</li> </ul>
「 | filter: query」でng-repeatのループ処理でユーザーがテキストボックスで入力した文字列を含むオブジェクトのみを抽出しています。
さらに「| orderBy: ‘age’」で’age’属性の昇順に並び替えて表示しています。
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データをバインドして表示
カスタムディレクティブ