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

個別データ表示用のClickイベントの登録

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ノートリストにClickイベントを登録して、作成した個別ノートデータ表示関数を発動させる方法について、解説致します。
講師:
04:57

字幕

このレッスンでは ノートリストに クリックイベントを登録して 作成した個別ノートデータの表示関数を 発動させる方法について 解説いたします まずはダウンロードしてきた こちらの「show_event」という フォルダーの中に入っている 「index.html」と「note.css」 そして「note.js」を 「エディタ」で開いてください そして これが それらのファイルを開いた状態です これらのファイルを使って 今回のレッスンの解説を 進めていきたいと思います それでは 早速 レッスンを始めていきましょう それでは まず「note.js」ファイルを 「エディタ」で確認してみましょう 前回のレッスンでは この部分で この「$scope.note」というモデルの中に 個別のデータを入れ込む処理を 書いていきましたね 今回は この関数を発動させる方法について 解説していきます この関数の名前は 「showDetail」でしたね これを覚えておきましょう では 「HTMLファイル」の方を開いてみます そして 今回注目したい点が こちらの部分となります ノートリストを表示するための この「li」タグ この「li」タグは このように 各ノートのタイトルを 囲っている要素となりますが これに対して 「ng-click」と書いてあります このように書くことで この「li」要素がクリックされたら この「=」の後の処理を実行する といった形になります そして 「=」 「showDetail()」と書いて その中に引数として 「note.idx」と書いています このように書くことで 先ほどの「JavaScript」の方で 定義している関数「showDetail」を この「li」要素をクリックした時に 発動させることができます そして もう1つ注目して頂きたいのが こちらの引数ですね この引数には 「note.idx」と書いています この「note」は こちらの「ng-repeat」の中で定義している こちらの「note」となりますね 要するに 複数あるリストのデータの 個別のノートデータを表しています その個別のノートデータの 「idx」の値を 引数として設定しています それでは 「note.js」ファイルに戻ります 「ng-click」で こちらの「showDetail」を 設定したことによって 「li」要素がクリックされると こちらの処理が実行されてきて そして 引数に「note.idx」を設定しましたね それは こちらの値となります それが こちらの引数に代入されてきて そして 具体的に この「$scope.note」に 代入する処理の中で このインデックス番号が こちらの部分に反映されてきて 例えば 0番目が入ってくれば こちらのデータが この「$scope.note」のモデルに 格納されていくわけですね こうすることによって 「HTML」上のリストをクリックした際に このクリックされた「ノートのデータ」 この部分ですね この部分が こちらの「$scope.note」に代入されて それが そのまま 「HTML」上のノートの個別情報を 表示させる形につながっていきます それでは この状態で 「index.html」ファイルを ブラウザで開いて確認してみましょう こちらのファイルをブラウザで開きます すると このように表示されてきましたね それでは こちらの「ノートリスト」から 適当にクリックしてみましょう 例えば 「タイトル2」をクリックしてみます すると こちらに表示されてきましたね 「タイトル2」 そして 「これは【タイトル2】のコンテンツです」 というように 個別の詳細データが表示されてきました 例えば 「タイトル1」をクリックすると このように内容が変更されますね 「タイトル3」も同様の形です このように動作すると きちんとプログラムの実装ができている といった状態になります 以上で レッスンは終了です 今回は ノートリストに クリックイベントを登録して 作成した個別ノートデータ表示関数を 発動させる方法について 解説いたしました 以降のレッスンでは 表示された 個別のノートデータと対応した ノートリスト内の項目に対して 動的にクラスを変更して 選択状態のデザインに変更する方法について 解説いたしますので そちらもあわせてご覧ください

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

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

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

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

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

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