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

データ個別削除用の関数定義

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ノートデータを個別に削除する為の関数の作成方法について解説致します。
講師:
05:39

字幕

このレッスンでは ノートデータを個別に削除するための 関数の作成方法について解説いたします まずはダウンロードしてきた こちらの 「delete_note」という フォルダの中に入っている htmlファイルと cssファイル そして JavaScriptファイルを エディタで開いてください そして これが それらのファイルを開いた状態です これらのファイルを使って 今回の レッスンの解説を進めていきたいと思います それではさっそく レッスンを始めていきましょう まず始めに 現状の「index.html」ファイルを ブラウザで開いて 今回 実装していく内容を 確認してみたいと思います こちらの「index.html」ファイルを ブラウザで開きます すると このように 表示されてきましたね そして こちらのリストから適当にクリックします すると こちらに そのノートの詳細が表示されてきましたね 今回 実装していく内容は こちらの「ゴミ箱のアイコン」 こちらをクリックしたときに 現在表示されている こちらのデータを削除して そして こちらのリストで表示されている 部分からも削除する といった内容を実装していきます それではエディタに戻ります そして「note.js」ファイルを エディタで確認します 今回注目していただきたい部分は こちらの部分となります こちらの部分で 現在「詳細表示中のノートを削除」する 関数を定義して 実際に削除するプログラムを書いています それでは どのように記述しているか 確認していきたいと思います まずは 関数の定義ですね 「$scope.」と書いて その後に関数の名前 「deleteNote」としています そして「=」と書いて 「function(){」そして こちらで「}」の「;」 で処理を閉じています そして こちらの「{}」の間で 具体的に ノートのデータを削除する プログラムを書いています 順番に上から見ていきますと まずは こちらの部分 こちらの部分では 「$scope.notes.splice()」の「;」 と書いて その中の引数に 「$scope.note.idx,」の「1」としています このように書くことで まず こちらの「$scope.notes」 これは この JavaScriptのファイルの 上の方で定義している こちらの ノートのデータを格納している配列ですね モデルとなります こちらのデータから 「splice」 これは この「$scope.notes」の配列から 特定のデータを削除する といった意味になります では どのデータを削除するのか これは まずこちらの 1つ目の引数 「$scope.note.idx」 これは 現在表示中の ノートのデータのインデックス番号ですね このインデックス番号から 最後の この「1」 1つのデータを この「$scope.notes」の配列から 削除するといった形になります そして次に こちらの部分 これは「$scope.note」 現在表示中のデータですね これを初期化しています そして こちらの部分 こちらの部分では データを削除したことによって 歯抜け状態となった配列の要素に対して もう一度「idx」の値に きちんと削除された後の インデックス番号を代入してあげる 処理を書いています ここでは「angular.forEach」という Angular.jsが独自で持つ 繰り返しの処理を実行しています そして こちらの引数として「$scope.notes」 要するに 配列のデータですね 配列のデータを繰り返し処理します そして「function(note, index)」の 「{})」の「;」という形で 処理を閉じていて そして こちらの「function」の中の 「{}」の中に もう一度「idx」を 改めて採番するための処理を書いています ちなみに この「note」ですね この部分の「note」と この部分の「note」 これは こちらの繰り返し処理で 抽出されてきた こちらの配列ですね 配列の中の個別のデータを表していて そして この「index」は そのインデックス番号となります このようにすることで 現在データを保持している この「$scope.notes」という配列から データを削除することが可能となります 以上で レッスンは終了です 今回は ノートデータを個別に削除するため の関数の作成方法について解説いたしました 以降のレッスンでは 削除ボタンに 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宛までご連絡ください。