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

入力フォームの状態判別用の関数定義

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
入力フォームの入力状態を判別して、条件に応じて新規でノートデータを追加する為の関数の作成方法について解説致します。
講師:
05:35

字幕

このレッスンでは 入力フォームの入力状態を判別して 条件に応じて 新規でノートデータを追加するための関数の 作成方法について解説いたします まずはダウンロードしてきた こちらの 「form_change」という フォルダの中に入っている htmlファイルと cssファイル そして JavaScriptファイルを エディタで開いてください そして これが それらのファイルを開いた状態です これらのファイルを使って 今回の レッスンの解説を進めていきたいと思います それではさっそく レッスンを始めていきましょう 現状の「index.html」 こちらのファイルをブラウザで開いて 今回 実装しようとしている内容を 確認してみたいと思います こちらの「index.html」を ブラウザで開きます すると このように表示されてきましたね 今回 実装しようとしている内容は こちらの右部分 現状は まだ 何も入力されていない状態ですが 例えば こちらのタイトルに このように 何か入力したり こちらの本文に何か入力した際に 自動的に 新規のノートデータを 追加する機能となります それではエディタに戻って その部分を どのように実装しているか 確認していきたいと思います そして「note.js」ファイルを開いてください 今回 注目していただきたい部分は こちらの部分となります この部分では 「ノートの入力状態をチェック」して 条件に応じて 新しくノートを作る処理を記述しています それでは どのように記述しているか 確認していきたいと思います まずは「$scope.checkNote =」 「function」として 新しく 関数「checkNote」を作っています そして「function(){}」の「;」 で処理を閉じて この「{}」の間で 具体的な処理を記述しています どういった処理かというと まず「if文」で条件分岐を起こして そして この条件式の中で 「$scope.note.idx」 そして「===」の「空白のデータ」 としています このようにすることで「$scope.note」 これは この JavaScriptのファイルの こちらの部分で定義している 個別の詳細データですね この 個別の詳細データが 格納されているモデル の「idx」の値が何も設定されていないとき この「$scope.addNote()」の「;」 で記述された この「addNote」という関数 これは以前のレッスンで作成した 新規のノートを追加するための関数ですね これを発動させている状態となっています つまり「$scope.note.idx」が 空っぽの状態のとき というのは まだ 新しいノートのデータが 作成されていないときに 新しいノートを追加する といった形になります そして もう一箇所 注目していただきたい部分があります それは 以前作成した こちらの 「addNote」という関数です こちらの中の処理に対して 少し 手を加えています それはどこかというと まず こちらの 「function」の引数ですね こちらに「isEdited」 というのを追加しています そして その後に この「if文」を追加しています この「if文」は こちらの「isEdited」 これは「function」の こちらの引数ですね こちらの「isEdited」の中に 格納されているデータが 何もないとき ここで初めて 「$scope.note」の値を初期化する といった命令を追加しています そして 先ほど作成した こちらの「checkNote」という関数では こちらの「$scope.addNote」に 引数「true」を与えていますね この「true」が こちらの「isEdited」の中に格納されて この「if文」で条件分岐を起こすわけです ちなみに この「true」が この「isEdited」の中に この「true」が格納されると この「if文」の中の処理は実行されません 要するに 初期化しないということですね これは どういった意味があるかというと 何も入力されていない入力フォームで 入力した際に こちらで 新しくノートを作るのですが そこで初期化しないことによって そこで新たに入力した内容を 引き継いだ状態で 新しくノートを作る といった形になります このようにすることで ユーザーにストレスを与えることなく 新規のノートの追加をさせることが 可能となります 以上で レッスンは終了です 今回は 入力フォームの入力状態を判別して 条件に応じて 新規でノートデータを追加するための 関数の作成方法について 解説いたしました 以降のレッスンでは この入力フォームに対して 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宛までご連絡ください。