【Angularjs】 ng-repeatのフィルター・ソート

フィルター「limitTo」

まずは表示数を制御する「limitTo」 ★の箇所がフィルターを利用している箇所です。

limitTo:3で、表示する件数を最大3件としています。

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

並び替え「orderBy」

表示順を制御する「orderBy」 ★の箇所がソートを利用している箇所です。 「orderBy」で指定した配列名を主キーに並び替え表示されます。

下記の例では、orderBy:'title'で、名前順に昇順で表示します。

<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>

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

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

複合フィルター

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

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