ng-repeat配列内のすべての要素をリストするには、(AngularJS で)を使用する必要があります。
複雑なのは、配列の各要素がテーブルの 1 行、2 行、または 3 行に変換されることです。
ng-repeatが要素で使用される場合、<tbody>との間にはいかなる種類の繰り返し要素も許可されないため、有効な HTML を作成できません<tr>。
たとえば、 で ng-repeat を使用すると<span>、次のようになります。
<table>
<tbody>
<span>
<tr>...</tr>
</span>
<span>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
</span>
<span>
<tr>...</tr>
<tr>...</tr>
</span>
</tbody>
</table>
これは無効な HTML です。
しかし、生成する必要があるのは次のものです:
<table>
<tbody>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
</tbody>
</table>
ここで、最初の行は最初の配列要素によって生成され、次の 3 行は 2 番目の配列要素によって生成され、5 行目と 6 行目は最後の配列要素によって生成されます。
レンダリング中に、バインドされている HTML 要素が「消える」ように ng-repeat を使用するにはどうすればよいですか?
それとも、これに対する別の解決策はありますか?
説明: 生成された構造は以下のようになります。各配列要素は、テーブルの 1 ～ 3 行を生成できます。理想的には、回答は配列要素ごとに 0 ～ n 行をサポートする必要があります。
<table>
<tbody>
<!-- array element 0 -->
<tr>
<td>One row item</td>
</tr>
<!-- array element 1 -->
<tr>
<td>Three row item</td>
</tr>
<tr>
<td>Some product details</td>
</tr>
<tr>
<td>Customer ratings</td>
</tr>
<!-- array element 2 -->
<tr>
<td>Two row item</td>
</tr>
<tr>
<td>Full description</td>
</tr>
</tbody>
</table>
ベストアンサー1
AngularJS 1.2では、ng-repeat-startまさにあなたが求めていることを実行するというディレクティブがあります。私の回答を参照してください。この質問では使用方法の説明についてはこちらをご覧ください。