AngularJS 1.2 で追加されたng-repeat-startとng-repeat-end


AngularJS 1.2 で追加された新しい directive のng-repeat-startng-repeat-endを紹介。

通常のng-repeatでは実現しにくかった複数の要素にまたがった繰り返しが可能になる。

ul / ol

コードを見るほうがわかりやすいので、まずは通常のng-repeat<li>を繰り返すコード例から。

1
2
3
<ul>
  <li ng-repeat="user in users">user.name</li>
</ul>

dl

次は<dl>の例。このケースではng-repeat-startng-repeat-endを使う。

1
2
3
4
<dl>
  <dt ng-repeat-start="user in users">user.name</li>
  <dd ng-repeat-end>user.description</li>
</dl>

<dl>は特殊で、<dt><dd>が交互に並び<dl>で囲まれない。そのため、ng-repeat ではうまく指定できなかった。<dl>に対して ng-repeat を指定すると<dl>ごと繰り返されてしまう。

ng-repeat-startng-repeat-endを利用すると、<dt><dd><dt><dd>のように、<dt><dd>がセットで繰り返される。

table

また、以下のテーブルのコード例のように、2 行分を繰り返すような場合にもng-repeat-startng-repeat-endを利用するとうまくいく。

1
2
3
4
5
6
7
8
9
10
11
<table>
  <tbody>
    <tr ng-repeat-start="user in users">
      <td>user.name</td>
      <td>user.sex</td>
    </tr>
    <tr ng-repeat-end>
      <td colspan="2">user.description</td>
    </tr>
  </tbody>
</table>