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

動的なClassの変更

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
表示された個別のノートデータと対応した、ノートリスト内の項目に対して、動的にClassを変更して、選択状態のデザインに変更する方法について解説致します。
講師:
05:43

字幕

このレッスンでは 表示された個別のノートデータと対応した ノートリスト内の項目に対して 動的にクラスを変更して 選択状態のデザインに変更する方法について 解説いたします まずはダウンロードしてきた こちらの「control_class」という フォルダの中に入っている htmlファイルと cssファイル そして JavaScriptファイルを エディタで開いてください そして これが それらのファイルを開いた状態です これらのファイルを使って 今回の レッスンの解説を進めていきたいと思います それではさっそく レッスンを始めていきましょう まずは現状の「index.html」ファイルを ブラウザで開いて 今回 実装する内容を 確認してみたいと思います こちらの「index.html」を ブラウザで開きます すると このように表示されてきましたね それでは こちらのノートリストから 適当にクリックしてみましょう 例えば「タイトル2」をクリックします すると こちらに「タイトル2」の 詳細な情報が表示されて こちらのリストのデザインが変わりましたね 今回は このリストのデザインを 変える方法について解説していきます ちなみに「タイトル1」をクリックすると このようになって 「タイトル3」をクリックすると このようになります エディタに戻ります それでは まずはこちらの htmlファイルの方から 見ていきたいと思います 今回 注目していただきたい部分は こちらの部分となります このリスト表示の「li」タグ こちらに 今回は 「ng-class」というものを付けています そして「=」と書いて そのあとに「{」で囲ってあげて そして その中には 「active」と書いて 「:」 そして その後に「isActive()」の その「()」の中の引数に 「note.idx」を入れています このように書くことで この「li」タグに対して 動的に付加することが可能となります 具体的に どういうことかと言うと まず こちらの「active」 これは付加したいクラス名を表しています このクラスには あらかじめ こちらの「note.css」の方で スタイルを定義しています そして その後に「:」を書いて その後に「isActive」と書いていますね ちなみに この「:」の後の こちらの部分が 「true」に値するものであれば こちらのクラス「active」 というものを付加する そして こちらが 「false」に値するものであれば こちらの「active」というクラスは付けない といったような形になります 今回は この「true」or「false」を判別する部分に 「isActive」という関数を 入れ込んでいます そして この関数の引数には「note.idx」 という形でループで表示されてくる 個別のノートの「idx」の値を 入れ込むようにしています それでは これを踏まえて 「note.js」ファイルを開いてみましょう そして 注目していただきたい部分は こちらの部分となります こちらの部分で 先ほど「ng-class」の中で記述していた関数 「isActive」を定義しています それでは この「isActive」が どのように書かれているか 確認していきたいと思います まず「$scope」と書いて「.」 そして 関数の名前「isActive」ですね そして「=」と書いて 「function()」 引数に「index」 という変数を入れておきます そして「{}」で処理を閉じていますね そして その「function」の中の 処理はどうなっているかというと まず 「if文」で条件分岐を行います どういった条件分岐かというと こちらの「$scope.note.idx」が こちらの引数で与えられた値「index」と 同じであれば「true」を返す そして 同じでなければ 「false」を返す といった形としています この「$scope.note.idx」 というのは こちらの 「ノート個別データ」の この 「idx」の値を指しています そして こちらの「index」は この「function」の引数の値ですね これを比較して「true」 もしくは「false」としているわけです 要するに 簡単に言い換えますと 現在表示されている 個別のノートデータの「idx」の値と クリックされた「li」要素 に紐付いている「idx」の値が 「===」であれば「true」として 「active」という名前のクラスを付ける といったような形となります このようにすることで 先ほど ブラウザで確認したとおり 左側のリストをクリックしたときに そのクリックされた詳細情報が 右側に表示されて そして そのクリックしたリストの部分の クラスに「active」が付加されて デザインが切り替わるといった形になります 以上でレッスンは終了です 今回は 表示された 個別のノートデータと対応した ノートリスト内の項目に対して 動的にクラスを変更して 選択状態のデザインに 変更する方法について 解説いたしました 以降のレッスンでは 新規ノートデータを追加するための 方法について解説いたしますので そちらも併せてご覧ください

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

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

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

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

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

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