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

データ個別削除用のClickイベントの登録

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
削除ボタンにClickイベントを登録して、作成した個別削除用の関数を発動させる方法について解説致します。
講師:
03:05

字幕

このレッスンでは 削除ボタンに clickイベントを登録して 前回のレッスンで作成した 個別削除用の関数を発動させる方法 について解説いたします まずはダウンロードしてきた こちらの 「delete_event」という フォルダの中に入っている htmlファイルと cssファイル そして JavaScriptファイルを エディタで開いてください そして これが それらのファイルを開いた状態です これらのファイルを使って 今回の レッスンの解説を進めていきたいと思います それではさっそく レッスンを始めていきましょう まずは 前回のレッスンのおさらいです 「note.js」ファイルを エディタで確認してみます そして 前回のレッスンでは こちらの部分ですね 現在 「詳細表示中のノートを削除」するための 関数を定義しました 今回は この「deleteNote」という関数を 削除ボタンを押したときに呼び出して 実際にノートを削除する手順について 解説していきたいと思います それでは htmlファイルに戻ります そして こちらのファイルで 注目していただきたい部分は こちらの部分となります こちらの「button」タグ これは「削除ボタン」を 作るために利用しています そして この「button」タグに このように 「ng-click」と書いてあげることによって この「button」がクリックされたときに この「=」の後に続く処理を実行させる といった形としています そして 実行させる内容は 先ほど確認した こちらの 「deleteNote」という関数ですね それでは この「index.html」ファイルを ブラウザで開いて 動作の方を確認してみたいと思います こちらのファイルをブラウザで開きます すると このように表示されてきましたね では こちらのリストから 適当にクリックします 「タイトル2」のノートを選択しました では こちらの「削除ボタン」を クリックしてみましょう すると このように削除されましたね こちらの右側の 詳細表示部分からも表示が消えて そして こちらの リストからも表示が消えました このようにデータが削除されれば きちんとプログラムが動いている といった形になります 以上で レッスンは終了です 今回は 削除ボタンに clickイベントを登録して あらかじめ作成しておいた 個別削除用の関数を発動させる方法 について解説いたしました 以降のレッスンでは 個別ノートデータの表示有無に応じて 削除ボタンの表示 非表示を 切り替える方法について解説いたしますので そちらも併せてご覧ください

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

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

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

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

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

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