AngularJSを使ってみよう

並び順の昇順と降順を切り替える

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
フィルタで並べ替えるとき、昇順と降順が切り替えられます。
講師:
04:45

字幕

このレッスンでは AngularJS の フィルタを使った並べ替えに 昇順と降順の切り替えを 加えたいと思います 今画面にリストがでていて 並べ替えの機能がついています 今「名前」順なんですが これを「人物情報」順にすると 並びが変わります 名前に戻しましょう そして昇順と降順の ラジオボタンは付いているのですが これにはまだ何の機能もありません AngularJS の設定を加えて 昇順と降順の選択ができるように したいと思います 今開いた html ドキュメントで 並べ替え ソートの機能は この select 要素で設定してあります ディレクティブの ng-model で artistOrder という名前が与えられています そして2つのオプションで 片方の値が name もう一方が reknown と この選択によって 並べ替えが行われる ということになっています 関連付けられているのは li 要素ですね ng-repeat のディレクティブで artists というプロパティから データを一個一個取り出して 加えていくのですけど その時のフィルタとして orderBy というキーワードを設定し artistOrder の設定 ここで選ばれたものによって 並べ替えをしなさい という指定になっています ですから この選択を変えると 並べ替えができたということです そしてラジオボタンのほうはこちらです まだラジオボタンを設定してある といるわけですね input 要素で type は radio そして名前を設定して 片方は name のほうが 初めにチェックしてあると それからラベルとして 「昇順」「降順」という テキストが加えられています けれども AngularJS の ディレクティブがありませんので 設定がコントロールとして 反映されないということです ではディレクティブを書いていきましょう ng-model です これはこちらと一緒ですね 並べ替えの時と一緒です ng-model で 違う名前をもちろん付けます 名前は direction としましょう こちらの name と同じにします コピーを持ってきます そしてもう一方の radio ボタンも やはり このディレクションについての 設定ですので コピーを持ってきます そうすると この選択によって ng-model のディレクション という名前で設定が保管されます この設定されたものを こちらの li 要素のほうで 反映しようということですね そして artistOrder には オプションがあります そのオプションとして reverse という値を : に続けて設定すると 反対順 降順になるんですね その reverse という値なのですが それはこちらのほうに設定します 降順のほうですね ここに value として reverse という設定をし こちらの Order の後は direction の設定を 読み込んできなさい ということです コピーを持ってきます そうすると direction の値が どちらになっていますか ということで reverse になっていれば reverse だから 降順にしましょうということです こちら値がありません 値がない時には昇順になる という設定になっています ですからこれでOK ということなので ファイルを「保存」して ブラウザで確認しましょう ブラウザのウィンドウをリロードします もちろん最初は何もかわっていませんけれど では「降順」を選択します 並びが変わりました 「人物情報」に項目を切り替えます 「人物情報」の降順ということですね それから「昇順」 ちゃんと並べ替えが行われています このレッスンではソート 並べ替えの順番を 昇順と降順の2つを切り替える という方法についてご説明しました その場合には orderBy の 対象となる物に対して コロン ( : ) でオプションを設定します reverse という値を与えると 降順になる ということでした

AngularJSを使ってみよう

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

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

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

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

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