AngularJSを使ってみよう

複数のデータを表示する。

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ディレクティブを使って、配列から複数のデータを取り出して、HTMLドキュメントの要素に表示できます。
講師:
06:39

字幕

このレッスンでは angularJS を使って 複数のデータを HTML ドキュメントに 表示したいと思います 今ブラウザで開いているのは 複数の人のサムネイルと情報が リストのように表示されています このような表示を angularJS で どうやって行うのか説明して行きます 今開いている HTML ドキュメントには 一人分のデータのみ angularJS で表示しています まずアプリケーションが myApp ということで モジュールが作成されていて コントローラーが設定されています その中で一人分のデータが設定され コントローラーを使って その中の情報を表示しています それから こちらは img 要素で 画像の表示ということですね 現在の状態を確認しておきましょう 「ファイル」でブラウザでプレビューします 一人分の情報それから サムネイルが表示されています では HTML ドキュメントに戻りましょう 複数データを使う前に まず JavaScript コードを 外部ファイルにしたいと思います この部分ですね これをカットして 新規の JavaScript ファイルを作ります 「ファイル」>「新規」で JavaScript のファイルです 作成しましょう そして全体を選んでペーストします では ファイルを保存します 「ファイル」>「保存」で js というフォルダが作ってあるので ここに保存したいと思います 名前は controllers として保存します 今度は HTML ドキュメントですね こちらは JavaScript の script 要素ですね ソース src の属性で 今保存した― 一応ここで1回確認しておきます JavaScript ファイルを開きます ファイルを保存します ブラウザをリロードしましょう 特に表示が変わらなければOKです では 作業を続けます JavaScript ファイルの方はまだデータが 一人分しかありません item ということでオブジェクトが 設定されているんですけども 一人分ですね 複数の人数のデータが実は JSON ファイルで作ってあります 今回は JSON ファイルそのものは使わず このデータをコピーしてしまおうと 思います データ一つ一つは配列に入っています [ ] ですね そしてその配列の中に入っているオブジェクト この項目は先程の JavaScript ファイルにある この item ですね その項目と同じ形になっています それが複数あるということですので この全体を選んで コピーして JavaScript ファイルの方にペーストします ここからここまで 最後のセミコロンは必要ですので 付けることにして ペーストと セミコロン付いていますね 大丈夫ですね そしてこの1項目 オブジェクト1個を item という形で扱っていたので それが複数ありますので 名前を変えることにします artists という名前にします では このファイルを保存して HTML ドキュメントの方に戻ります item というのは なくなってしまったんですが これは li 要素の中に含まれています この li 要素の中を ワンセットのデータなんですが これを複数生成するという風に したいと思います li 要素の中にディレクティブを書きます ng ですね angular のディレクティブです repeat という風にします これは JavaScript で言うと for in になります ここは angular の書き方ではないんですが JavaScript だと for item in artists なんていう書き方をするんですね そしてループ処理をするんですが これと同じ内容のことを angularJS では この ( ) 内は同じです for は要りません for の代わりにこの repeat という ディレクティブがあるので こういう形になります item これは変数名なんですが ここで item と使っているので item としました artists というデータが JS の方に設定しましたね この中から1個1個取り出して item という変数に入れ その変数のデータを基に つまり一人一人の情報を基に サムネイルとかその他の情報 名前とかの情報を表示しましょうと いう意味になります では ファイルを保存して確認してみましょう ブラウザをリロードします そうすると複数のデータが表示されました CSS の方でマウスポインタを重ねた時の hover の設定などはしてありますので ポインタを重ねるとちょっと色が変わりますね このレッスンでは angularJS で 配列の形で定められたデータの中から 複数の要素を取り出して それぞれ要素として HTML ドキュメントに表示しました その場合 使うのがディレクティブ ng-repeat ですね そしてコントローラーの中に定めた プロパティの名前 そしてそこから取り出した変数を使って 元の一人の時のデータと同じ形で そのまま複数のデータが 表示できてしまうということです

AngularJSを使ってみよう

AngularJSはHTMLを拡張するフレームワークで、Webページを動的に生成できます。このコースではJavaScriptの基礎を学んだ方を対象に、AngularJSのインストールからWebアプリの作成までを実際にコードを書きながら解説します。JSONファイルから読み込んだデータリストの作成やデータの並べ替え・検索などを説明します。

2時間12分 (20 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年12月13日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。