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

Filter機能の実装

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
作成した検索用モデルを利用して、Angular.jsのFilter機能を使いながら実際に検索結果を表示させる方法について解説致します。
講師:
05:43

字幕

このレッスンでは 前回のレッスンで 作成した検索用モデルを利用して Angular.jsの フィルター機能というものを使いながら 実際に検索結果を表示させる方法について 解説いたします まずはダウンロードしてきた こちらの 「filter」というフォルダの中に入っている htmlファイルと cssファイル そして JavaScriptファイルを エディタで開いてください そして これが それらのファイルを開いた状態です これらのファイルを使って 今回の レッスンの解説を進めていきたいと思います それではさっそく レッスンを始めていきましょう それでは まず 前回のレッスンのおさらいです 前回は こちらの検索フォーム用の 「input」タグの中に 検索用のモデルを作成しました 今回は こちらを使って 実際に検索結果を表示させる方法について 見ていきたいと思います そして その検索結果を表示させる機能を 実装した部分が この部分となります この部分は検索結果を表示するための 「li」要素ですね 「li」要素の「ng-repeat」の中に 付け加えている形となっていて このように「|」を入れた後に 「filter:search」と書いています このようにすることで なんと検索機能の実装が完了します 通常 こういった検索機能を実装するには かなりの労力がかかりますが Angular.jsを利用すると とても簡単に 検索機能を実装することができます ちなみに この「filter:」の後の 「search」というのは こちらの上の部分で定義した 検索用のモデル「search」と同じですね それでは この状態で一度 このhtmlファイルをブラウザで開いて 動作を確認してみたいと思います こちらのファイルをブラウザで開きます すると このように表示されてきましたね それでは 試しに 検索をしてみたいと思います 例えば「タイトル1」番を 引っ張ってきたいので ここに「1」と打ってみましょう すると 検索結果は 2件に絞られてきたのですが 「タイトル2」というものも 一緒にくっついてきてしまっていますね この原因について ご説明します それでは エディタに戻ります 「1」を入力したのに どうして「タイトル2」というデータまで 検索結果に表示されてきたのか その原因は こちらの部分にあります 今 「ng-model="search"」としていますね そして こちらの 「ng-repeat」の中にかけている 「filter」に対しても 「search」となっています このように書くことで その検索したいノートの データに格納されている すべてのものに対して検索をかける といった形になります わかりやすく説明するために JavaScriptファイルを開きます すると こちらにノートのデータが ありますね こちらの部分には 「idx」と「title」そして「body」の 3つの要素が入っています 要するに 先ほどの 「search」の書き方ですと こちら「idx」「title」「body」 すべての要素に対して検索をかける といった意味になります 先ほど「1」と検索して 「タイトル2」まで引っ張ってきたのは こちらの「idx」が 「1」になっているからです それでは 今回は そういった事態にならないように こちらの「title」部分だけを 検索対象にしてみたいと思います htmlファイルに戻ります そして 変更する部分は こちらの「input」タグの中に書かれている 「ng-model="search"」の部分です そして この「search」の後に このように書きます 「title」と書いてあげます もちろん これは検索したいものですね なので 今回は「title」のみを 検索対象とする という形が これで出来上がりました それでは この状態で 「index.html」ファイルを保存して 再度 ブラウザで開いてみたいと思います こちらのファイルをブラウザで開きます すると同じように このように表示されてきましたね では 同様に「1」と入力してみましょう すると このように「タイトル1」だけが 表示されてきました そして クリックすると こちらに「タイトル1」のデータが 表示されてきましたね 「3」と検索してみましょう すると「3」が表示されてきて クリックすると 「タイトル3」のコンテンツに変わりましたね このように動作すれば きちんとフィルターの設定ができている といった状態になります 以上で レッスンは終了です 今回は あらかじめ作成しておいた 検索用モデルを利用して Angular.jsの フィルター機能を使いながら 実際に検索結果を表示させる方法について 解説いたしました 今回のレッスンをもちまして Angular.jsを利用した ノートパッドWebアプリケーションの 開発は完了となります このコースを一通り学習すれば Angular.jsの基本的な内容と開発の 流れを理解していただけるかと思いますので ぜひ Angular.jsをマスターして 自分なりのWebアプリケーションを 開発してみてください

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

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

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

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

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

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