AngularJSを使ってみよう

フィルタを入力フィールドに関連づける

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
フィルタを入力フィールドに関連づけて、検索の機能を加えます。
講師:
03:22

字幕

このレッスンでは AnguarJS の フィルタの機能を使って 検索の機能を付けたいと思います 今画面で開いている ページなんですけど 検索の入力用のフィールドが 設定してあります もっとも何も AnguarJS の 設定をしていませんので 何かを入力しても 何も起こりません ここに入力したものによって 下のリストが変わってくるように というふうにしたいと思います html ドキュメントを開きました 入力フィールドは input 要素です そしてリストに人名やサムネイル その他の情報を取り出すのは この li 要素ですね その中で ng-repeat というディレクティブで データを1つ1つ取り出して リストに加えています この2つを関連付けるという設定を行います そのために この input の要素に ディレクティブを加えます ng-model です この要素の中に入れたもの その内容テキストですね をとってきて反映させましょう ということで名前を付けます ここでは query としましょう これで名前が付きました その下が この query という 名前を使って こちらの li 要素ですね に関連付けることができます フィルタですので 縦棒一本入れて1スペース そして filter というキーワードなんですが この後に : で この query という ng-model に設定した名前を置きます そうすると先程言いました通り input 要素に入力したテキストをとってきて こちらに関連付けて li 要素を取り出す という処理になるわけです では「保存」して確認してみましょう ブラウザのウィンドウを リロードします もちろん初めは何も変わりませんね けれど ここで入力をしてみます j ちょっと変わりましたね e 大分少なくなりました この Jennifer さんを 出そうと思っているのですが 他にどうも je というものが 見当たらないと思うかもしれません 実はこのデータの元になっている json ファイルの中には 今表示されている情報以外にも テキストの情報が入っています ですからそこも対象になっているので Jennifer さん以外も 表示されているのですが 更に n ぐらいまでタイプすると 一人になりました ということで 検索の機能が加わったということが お分かりになったと思います このレッスンでは AnguarJS の フィルタの機能を使って 検索の機能を加えました その場合 検索の input 要素 ここに このデータを使うんだよ ということで ng-model の ディレクティブを設定し その名前を今度は 要素を取り出す ng-repeat の中で filter:query という この名前を指定して 2つの関連付けを行いました

AngularJSを使ってみよう

AngularJSはHTMLを拡張するフレームワークで、Webページを動的に生成できます。このコースではJavaScriptの基礎を学んだ方を対象に、AngularJSのインストールからWebアプリの作成までを実際にコードを書きながら解説します。JSONファイルから読み込んだデータリストの作成やデータの並べ替え・検索などを説明します。

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

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

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

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