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

削除ボタンの表示切り替え制御

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
個別ノートデータの表示有無に応じて、削除ボタンの表示/非表示を切り替える方法について、解説致します。
講師:
04:00

字幕

このレッスンでは 個別ノートデータの表示有無に応じて 削除ボタンの表示 非表示を 切り替える方法について解説いたします まずはダウンロードしてきた こちらの 「switch_button」という フォルダの中に入っている htmlファイルと cssファイル そして JavaScriptファイルを エディタで開いてください そして これが それらのファイルを開いた状態です これらのファイルを使って 今回の レッスンの解説を進めていきたいと思います それではさっそく レッスンを始めていきましょう まずは 今回 実装していく内容を こちらの htmlファイルを ブラウザで開いて確認してみたいと思います こちらの「index.html」を ブラウザで開きます すると このように表示されてきましたね 今回注目していただきたい部分は こちらの部分となります 今は こちらのノート右側の部分 何も表示されていない状態ですね こちらの右側に何も表示されていないとき この部分にも 何も表示がされていません ここで こちらのリストの部分から 適当にクリックしてみましょう すると このように 右側の部分にはデータが 表示されて そして こちらの部分にも ゴミ箱アイコンの 「削除ボタン」が 表示されてきました このように 今回のレッスンでは こちらの 右側の部分に データがあるときのみ こちらのゴミ箱アイコンの 「削除ボタン」を 表示させるように してみたいと思います それではエディタに戻ります このゴミ箱アイコンの 表示 非表示の切り替えですが こちらの htmlファイルの中で 実装していきます 今回注目していただきたい部分は こちらのファイルの中の この部分ですね この「削除ボタン」の部分です そして この中の こちらの部分をご確認ください ここには「ng-show」と書いていますね このように書くことで この「ng-show」の 後の「=」に続く こちらの右側の部分 この右側の部分が条件式となっていて この右側の条件式が 「true」に値するものであれば こちらの「button」タグが 表示されることになって 逆に こちらの部分が 「false」に値するような内容であれば この「button」タグは 非表示となるような機能となっています 今回は こちらの条件式の部分に 「note.idx !==」そして「空っぽのデータ」 という形で指定しています 「note.idx」というのは こちらの JavaScriptファイルの中で 定義している こちらの部分ですね ノートの個別データを保持しておくための モデルとなっています こちらの「idx」の中の値が 有るか無いかで判断します htmlファイルに戻ります この条件式においては 空っぽでない場合 「true」という形になりますので 逆をいえば 内容が入っている場合は 「true」という形ですね 要するに こちらの 「note.idx」に値が入っている 言い換えれば 右側にノートが 表示されている状態であれば「true」なので こちらの「button」タグを表示する 逆に何も値が入っていなかった場合は 「false」となりますので こちらの「button」タグは非表示になる といった形となります 以上で レッスンは終了です 今回は 個別ノートデータの 表示有無に応じて 削除ボタンの表示 非表示を 切り替える方法について解説いたしました 以降のレッスンでは ノートリストに対して検索機能を付加する 方法について解説いたしますので そちらも併せてご覧ください

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

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

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

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

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

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