リストとリストフィルター (3/6)

多数のデータを繰り返し表示するのは、リストで簡単に行えることがわかりました。このリスト、単に配列の中身を順番に表示する」というだけしか利用できないわけではありません。表示の際にいろいろとデータを操作することも可能です。

一例として、先ほどのサンプルで、<tr>タグの部分を以下のように書き換えてみてください。

<tr ng-repeat="obj in ctl.data 
    | orderBy : '-price'">

こうすると、データのpriceの値が大きいものから順に並べ替えて表示を行います（下図参照）。

ここでは、obj in ctl.dataの後に｜記号を付け、更に「orderBy: '-price'」というものが付けられています。これは、リストに適用するフィルター、「リストフィルター」です。先にテキストを表示する際に操作を行う「フィルター」について説明しましたが、リストフィルターはそのリスト版といってよいでしょう。リストに表示する項目や並び順などを操作することができるのです。

では、繰り返しに利用できるフィルターについてまとめておきましょう。


●並び順を指定する

orderBy: 項目名

先程の例で使ったものですね。これは、指定の項目を使って配列を並べ替えるものです。コロンの後に項目名を指定します。このとき、名前の前に半角マイナス記号（-）をつけると、逆順に並べ替えます。例えば、'price'ならpriceが小さいものから順になりますが、'-price'だと大きいものから順になります。


●最大項目数を指定する

limitTo: 整数

配列の項目数を指定します。例えば、limitTo:5とすると、最初から５つだけを取り出します。また、limitTo:-5というようにマイナス記号をつけると、最後から５つを取り出せます。


●値を比較する

filter: パターン

正規表現のパターンを使い、特定の項目だけを抜き出すのに使うものです。これは、テキストのフィルターでも使いましたね。リストの場合は、リストの項目がパターンに合致するものだけを取り出して処理できます。例えば、filter:'ok'とすれば、値が'ok'の項目だけが表示されます。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。