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

新規データ追加用の関数定義

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
新規のノートデータを追加する為の関数の作り方について解説致します。
講師:
05:02

字幕

このレッスンでは 新規のノートデータを追加するための 関数の作り方について解説いたします まずはダウンロードしてきた こちらの 「add_note」という フォルダの中に入っている htmlファイルと cssファイル そして JavaScriptファイルを エディタで開いてください そして これが それらのファイルを開いた状態です これらのファイルを使って 今回の レッスンの解説を進めていきたいと思います それではさっそく レッスンを始めていきましょう まず「note.js」ファイルを エディタで開いて確認してみます そして 今回注目していただきたい部分は こちらの部分となります 今回は こちらの 「初期ノートデータ」 こちらにノートを どんどんと追加するための 関数の作り方について ご説明していきます では こちらの部分ですね こちらの部分が その関数となるのですが 具体的に どのように記述しているのか 確認していきたいと思います まずは「$scope」と書いて「.」 そして関数の名前「addNote」 と書いています そして「=」と書いて「function(){」 そして こちらで「}」の「;」 で処理を閉じています そして この「{}」の中で具体的に ノートを追加する記述を行っています まずは「$scope.note =」 「{}」の「;」と書いて 3つの項目「idx」と「title」「body」に 「空白の値」を入れ込んでいます こうすることによって 現在 表示している 個別のノートデータですね それを初期化することができます この「$scope.note」を 初期化するということは ブラウザで確認したときに ノートの右側で表示している ノートの個別のデータの 表示も削除する といった形となります そして その次に こちら 「$scope.note.idx =」 「$scope.notes.length」と 書いています ここからは 新しいノートの作成処理について 書いています まずは「idx」の値に こちらの「$scope.notes」の 「length」 要するに数ですね その値を この新しいノートの「idx」に格納しています 具体的に どういうことかというと こちら 現在は初期データとして 3つのデータが 入っていますが「idx」の値は 「0」「1」「2」という形で -1 した状態のものが格納されていますね 例えば ここで 1つデータを追加する場合 こちらの「idx」は 「3」とする必要があります この「3」というのは 現状存在している データの数と一致しますね これを利用して新しいデータの 「idx」の値を設定するわけです そして 戻りまして 次の処理を見てみましょう こちらの部分ですね まず「if文」で条件分岐をしています そして「()」 そして「if文」の条件式に 「!」の 「$scope.note.title」としています 要するに 新しいノートのタイトルに 何も 設定されていなければ という意味ですね その場合は こちら 「$scope.note.title =」 「'新しいノート'」ということで 新しいタイトルとして「新しいノート」 というテキストを入れ込んでいます そして 最後のこちらの処理 こちらの処理は 「$scope.notes.push();」として この「push」の引数に 「$scope.note」としています 要するに こちらの「$scope.notes」 こちらの このデータですね このモデルです このモデルに対して 新しく作った「$scope.note」 ですね こちらで初期化されたものです このデータを 配列の最後に追加しろ といった意味になります このようにすることで 新規のノートデータ を追加することが可能になります 以上でレッスンは終了です 今回は新規のノートデータを追加するための 関数の作り方について解説いたしました 以降のレッスンでは ボタンに 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宛までご連絡ください。