AngularJSを使ってみよう

フィルタで並び順を変える

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
フィルタを使って、データを並べる順序が変えられます。
講師:
06:44

字幕

このレッスンでは AngularJS の フィルターの機能を使って データの並ぶ順序を変えるソートの 機能を加えたいと思います 今既に項目を選択できる プルダウンのコントロールを select 要素で加えてあります けれども AngularJS の設定は 特にしてないので ただ選択が変えられるだけで リストの表示は全く変わりません この選択を変えることで 表示順が変わるようにしましょう HTML ドキュメントの中の これがその select 要素で 2つの option を 切り替えるようになっています この select 要素の選択を リストを作る部分が この li 要素なんですけども ng-repeat で データを取り出して リストを作っていくわけですが ここに filter を加えて こちらの select 要素の選択が 反映されるようにしましょう その為にはこの select 要素に ディレクティブを加えます ng の model です そうするとこの model の中の データによって AngularJS がこちらの要素を コントロールできるということになります 名前をつけましょう ここでは artistOrder とします アーティストの順序ということですね そしてどういう順序で並べ替えるかというと 名前と リノウンという2つの 英語ですと name と reknown ですね 2つの項目があるので この2つの項目の選択にしたいと思います ですからバリューをこの option については name ですね 同様に今度はこちらです バリューを reknown という風にします ところでこの reknown という単語は あまり見かけないかもしれません 辞書を引いてみると一応載ってはいるんですが renown というこの単語の よくある書き間違いだそうです こちらの正しい renown は どういう意味かと言うと その人の名声とか言われますけど どんな人なのかという情報のことを renown としているわけです スペルミスは直したいところなんですが 元の JSON ファイルがこの単語を 使ってるものですから ここはこのまま使ってしまいます では まず model の方の設定ができたので これを今度は li 要素を取り出す時の filter に設定したいと思います artists のデータの中から 項目を1個1個とってくるんですが その時に検索が出来るような filter の設定 query とありますけども query はここですね この中に入力した input に入力した項目で 検索ができるようにということで その filter が1つかかっています それに更に続けてフィルターをかけます フィルターは縦棒 | で キーワードを打つんですけども この場合は orderBy と どういう順序で並べなさいという意味です そこで先程付けた名前 artistOrder を 設定します コピーを持ってきます そして保存をして ブラウザで確認しましょう ブラウザのウィンドウをリロードします 項目が「名前」と「人物情報」がありますけど 名前の方を選択すると 名前順 B C H H J となっていますね それから人物情報ですと その下のちょっと細かい情報ですが A から始まって C C F となっていますので 正しく並べ替えができています ただ ちょっと気になるのは 最初にロードしたとき 項目が空っぽになっているんですね この初期の値を設定したいと思います JavaScript ファイルの方に移りましょう HTML ドキュメントの方も確認して おこうと思うんですが どうしたいかと言うと この artistOrder ですね ng-model のディレクティブで 設定した artistOrder これの値が2つあるわけなんですが この一方の値を選択して おきたいということです では 最初にこの名前 name の方を 選択しておくようにしましょう つまり artistOrder の初期値を name に設定するということです では JavaScript ファイルの方に移って この JavaScript のコードは JSON のデータを HTTP のサービスで読み込んで 読み込みがうまく行ったら この処理を行いますということで ここでは artists というプロパティに 読み込んだ JSON のデータを設定しています これが初期の設定ですね 読み込んだ後最初に行われる設定ですので ここに付け加えればいいということです $ の scope で artistOrder ですね その初期値を... 文字列です name にするということです ではファイルを保存して もう一度ブラウザで確認します ブラウザのウィンドウをリロードしましょう 今は空っぽですけども リロードすると 最初に名前が選択されています そしてちゃんと名前順にリストが並んでいます 勿論 人物情報に変えれば 並ぶ順番は変わるということです このレッスンではデータの表示を 並べ替えるソートの機能をつけました その為に select の option の 親になっている― 項目 select 要素に対して ng-model のディレクティブで 名前を付け それを関連付けたい li 要素の中ですね filter に対して orderBy という キーワードで artistOrder すると こちらの選択した値に従って 並べ替えが行われました もう1つ JavaScript の方で 最初に読み込まれたときの初期値を 設定するという処理も加えました

AngularJSを使ってみよう

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

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

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

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

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