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

入力フォームへのChangeイベントの登録

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
入力フォームに対して、Changeイベントを登録して、入力フォームの内容に変更が生じた際に、作成した状態判別用の関数を発動させる方法について解説致します。
講師:
03:49

字幕

このレッスンでは 入力フォームに対して changeイベントを登録して 入力フォームの内容に変更が生じた際に 前回のレッスンで作成した 状態判別用の関数を発動させる 方法について解説いたします まずはダウンロードしてきた こちらの 「change_event」という フォルダの中に入っている htmlファイルと cssファイル そして JavaScriptファイルを エディタで開いてください そして これが それらのファイルを開いた状態です これらのファイルを使って 今回の レッスンの解説を進めていきたいと思います それではさっそく レッスンを始めていきましょう それでは まず前回のレッスンの おさらいからしていきたいと思います 「note.js」ファイルを エディタで開いてください そして こちらの部分ですね 前回のレッスンでは こちらの部分で 「checkNote」という関数を作って この「$scope.note.idx」の値が 空っぽの状態のとき 新しくノートを作る という処理を実装しました 今回は ノートのタイトルを入力する inputボックスや 本文を入力するテキストエリアに チェンジイベントを登録して こちらの「checkNote」という関数を 発動させる方法について解説していきます それでは htmlファイルを開いてください そして 今回 注目していただきたい部分は こちらの部分となります これはタイトルを入力する 「input」ボックスですね その中に「ng-change」と書いて 「=」と書いて 「checkNote()」と書いています このように書くことで この「input」ボックスに 入力された内容に変更があった場合 この「checkNote」という関数を 発動させる といった形になります これと同様に 本文を入力するための こちらの「textarea」にも このように 同じものを入れ込んでいます それでは この状態で この「index.html」ファイルを ブラウザで開いて その動作を確認してみたいと思います こちらのファイルをブラウザで開きます すると このように表示されてきましたね それでは こちら タイトルを入力する 「inputボックス」 そして こちら 本文を入力する 「テキストエリア」 それぞれに 文字を打ってみましょう このように入力すると 新しく こちらのノートリストの方に データが追加されましたね もちろん こちらにも書きます それでは 今 こちらのタイトルの方から 入力してみましたが 今度は こちらの本文を入力する 「テキストエリア」の方から 入力してみたいと思います 一度 ブラウザの「更新ボタン」を押します そして こちらの方に 適当に打ってみましょう すると このように 「新しいノート」というタイトルが付いて こちらのノートリストの方にも 新しいデータが追加されてきましたね このように動作すれば きちんと プログラムの実装ができている といった状態になります 以上で レッスンは終了です 今回は入力フォームに対して changeイベントを登録して 入力フォームの内容に変更が生じた際に あらかじめ作成しておいた 状態判別用の関数を発動させる方法 について解説いたしました 以降のレッスンでは ノートのタイトルが 未入力の状態にならないように 防止するための方法について 解説いたしますので そちらも併せてご覧ください

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

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

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

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

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

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