AngularJS：repeatのフィルター

サンプルはこちら。
http://codepen.io/KazuyoshiGoto/pen/bfuzv

前回紹介したrepeatにオプションの値を加えることで表示を制御できます。

件数の制御「limitTo」

<table>
  <tr>
    <th>Part</th><th>Name</th><th>Title</th>
  </tr>
  <tr ng-repeat="jojo in jojos | limitTo:1">
    <td>{{jojo.part}}</td>
    <td>{{jojo.name}}</td>
    <td>{{jojo.title}}</td>
  </tr>
</table>

「limitTo」に件数を記述することでその件数だけ表示されます。。

並び替え「orderBy」

<table>
  <tr>
    <th>Part</th><th>Name</th><th>Title</th>
  </tr>
  <tr ng-repeat="jojo in jojos | orderBy:'title'">
    <td>{{jojo.part}}</td>
    <td>{{jojo.name}}</td>
    <td>{{jojo.title}}</td>
  </tr>
</table>

「orderBy」で指定した配列名を主キーに並び替え表示されます。

<tr ng-repeat="jojo in jojos | orderBy:'-part'">

上記のように配列名にマイナスを加えると降順になります。

複合フィルター

<tr ng-repeat="jojo in jojos | orderBy:'title' | limitTo:2">

上記のようにフィルターは複数指定することもできます。