[解決済み] html要素なしでng-repeatを使用する方法

質問

を使用する必要があります。 ng-repeat (AngularJSの場合)配列の全要素をリストアップします。

複雑なのは、配列の各要素が、テーブルの1行、2行、3行のいずれかに変換されることです。

有効なhtmlを作成できない、もし ng-repeat の間に繰り返しの要素を入れることはできないためです。 <tbody> と <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番目は最後の配列要素で生成されています。

ng-repeatがバインドされているhtml要素がレンダリング中に「消える」ようにするには、どうすればよいですか？

それとも他に解決策があるのでしょうか？

明確化しました。生成される構造は以下のようになるはずです。 各配列要素は、テーブルの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>          

解決方法は？

更新してください。 Angular 1.2+を使用している場合は、次のようにします。 ng-repeat-startを使用します。 . jmagnusson さんの回答を参照してください。

その他、tbodyにng-repeatを貼るのはどうでしょうか？ (AFAIKでは、1つのテーブルに複数の<tbody>があっても問題ありません)。

<tbody ng-repeat="row in array">
  <tr ng-repeat="item in row">
     <td>{{item}}</td>
  </tr>
</tbody>