Angular.jsで作るノートパッドWebアプリケーション

個別データ表示用の関数定義

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
個別のノートデータを、前回作成したモデルに入れ込んで、HTML上に表示させる為の関数の作り方について解説致します。
講師:
03:08

字幕

このレッスンでは 個別のノートデータを 前回作成したモデルに入れ込んで 「HTML」上に表示させるための 関数の作り方について 解説いたします まずはダウンロードしてきた こちらの「show_detail」という フォルダーの中に入っている 「HTMLファイル」と「CSSファイル」 そして「JavaScriptファイル」を 「エディタ」で開いてください そして これが それらのファイルを開いた状態です これらのファイルを使って 今回のレッスンの解説を 進めていきたいと思います それでは 早速 レッスンを始めていきましょう 「note.js」ファイルを 「エディタ」で確認してみます そして 今回注目して頂きたい部分は こちらの部分となります こちらの部分で前回作成したモデル こちらの「$scope.note」という モデルの中に値を組み込む 関数を定義しています それでは どのように処理を 書いていっているか見ていきたいと思います まずは「$scope.note」と書いていますね これは こちらのモデルの値となります この「$scope.note」に 「=」で代入するようにして そして その後に「$scope.」 今度は複数形の「notes」としていますね こちのデータはこの部分ですね そしてその後に配列を示す「[]」 そして この中には 「function」の引数である「index」を この中に入れています このように書くことで こちらの「function」の引数である 「index」の値が こちらの配列の「[]」の中の 「index」の値に代入されてきて この「$scope.notes」の中に格納されている 何番目のデータかを示すことができます 例えば こちらの「初期データ」で見た場合ですと まず0番目でしたら こちらのデータですね 1番目でしたら こちらのデータ 2番目でしたら こちらのデータ となるわけです これらの「個別のデータ」が こちらの「$scope.note」 要するに こちらのモデルですね こちらに格納されてくる形となります この「$scope.note」は 「index.html」 こちらのこの部分ですね 「ng-model="note.title"」と 「ng-model="note.body"」に 紐づいているので ここで代入してあげることによって 代入された値が そのまま「HTML」上に表示されてくる といった形になります 以上で レッスンは終了です 今回は 個別のノートデータを 前回作成したモデルに入れ込んで 「HTML」上に表示させるための 関数の作り方について 解説いたしました 以降のレッスンでは ノートリストに クリックイベントを登録して 今回作成した 個別ノートデータ表示関数を 発動させる方法について 解説いたしますので そちらもあわせてご覧ください

Angular.jsで作るノートパッドWebアプリケーション

Angular.jsはJavaScriptライブラリで、複雑なWebアプリケーションを簡単かつ効率的に開発していくことが可能です。このコースではノートパッド機能をもったWebアプリケーションを実際に作り、それをAngular.jsを使って実装する方法について学習します。このコースを見れば、Angular.jsの基本的な内容とワークフローがわかるでしょう。

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

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

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

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