~Linux、MySQLからAJAXまでAngularJSのng-repeatを使ってリストやテーブルを作成、フィルターを適用AngularJSのng-repeatを使ってリストやテーブルを作成する方法、ng-repeatで表示した内容をAngularJSのフィルターを使ってフィルタリングして表示する方法をまとめました。デモとコードサンプルはこちら。※目次をクリックすると目次の下部にコンテンツが表示されます。以下に作成例を示します。</tbody></table>ng-repeatのビルトイン変数を使用する例ng-repeatは、指定したコレクション(上記例では$scope.people)をループ処理する際、下記ビルトイン変数にも自動で値が割当てられる。$index:ループで現在処理されているオブジェクトのオフセット番号。(0~コレクション長-1)$first:ループ処理で先頭のオブジェクトの場合はtrue。$last:ループ処理で先頭、最後以外のオブジェクトの場合はtrue。$even:ループ処理で$indexが偶数のオブジェクトの場合はtrue。$odd:ループ処理で$indexが奇数のオブジェクトの場合はtrue。上記ビルトイン変数を使って、表に行番号を追加し、背景色をストライプにするサンプルの作成例を示します。</tr></tbody>※’bg-success’、’bg-warning’Bootstrap3で定義されているCSSクラス。‘bg-warning’AngularJSのng-classディレクティブを使って、ng-repeatのビルトイン変数$oddがtrueの場合は’bg-success’のCSSクラス、falseの場合は’bg-warning’のCSSクラスを適用し、テーブルの各行毎に背景色を変えています。ng-repeatを入力文字列でフィルターAngularJSのビルトインのフィルター機能を使用してng-repeatの表示内容をフィルタリングする例です。query」でng-repeatのループ処理でユーザーがテキストボックスで入力した文字列を含むオブジェクトのみを抽出しています。‘age’」で’age’属性の昇順に並び替えて表示しています。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。コメントデータの処理方法の詳細はこちらをご覧ください。WordPressモバイルバージョンに。