AngularJSを使ってみよう

ディレクティブを使ったフィルタリング

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
フィルタを使うと、ディレクティブによる表示の設定が変えられます。
講師:
02:17

字幕

このレッスンでは AngularJS の フィルタの機能を使って html ドキュメントに表示する リストの設定を変えてみます html ドキュメントでは ng-repeat という ディレクティブを使って artists という プロパティにある項目を 1つずつ取り出し その中の name reknown という 名前で設定されたテキストを表示しています まずはフィルターをこの item.name の項目に加えてみましょう フィルタは縦棒「|」を1本入れて その後フィルタの キーワードを入れていきます ここは uppercase 大文字ということですね これで名前がすべて大文字に変わります ファイルを「保存」して ブラウザで確認しましょう ブラウザウィンドウをリロードします 名前がすべて大文字に変わりました もう1つフィルタを試しましょう このドキュメントに表示している 項目の数 これを制限したいと思います 項目を取り出しているのは この li 要素の ng-repeat このディレクティブで 1つ1つ取り出しているわけですね ここでまた | を一本入れて limitTo: で数を入力します では 5としましょう また「保存」します ブラウザウィンドウをリロードしましょう 表示される項目が 5つに制限されました このレッスンでは AngularJS の フィルタの機能を使って 項目の表示の設定を変えてみました フィルタを設定するには その設定したい項目 項目の中に | を入れて そしてキーワードをタイプします uppercase はすべて 大文字にする場合ですね それからこちらは 数を制限する limitTo です この2つのフィルタを ご紹介しました

AngularJSを使ってみよう

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

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

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

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

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