javascript - How can I use ng-repeat in a table body to encompass multiple rows?

I'm trying to transition from jsRender to AngularJs and can't seem to figure out how to generate multiple table rows with ng-repeat.

I need to generate two table rows per ng-repeat, these rows are related to each other. The second row is actually a hidden row that expands out like an accordion. This works perfectly fine with renderJs:

With renderJs:

<table>
  <thead>
    <tr>
      <th>Stuff</th>
      <th>Stuff2</th>
    </tr>
  </thead>
  <tbody>
    {{for myArray}} <!-- Creates two rows per item in array -->
    <tr>
      <td>{{data}}</td>
      <td>{{data2}}</td>
    </tr>
    <tr class="special-row">
      <td>{{otherData}}</td>
      <td>{{otherData2}}</td>
    </tr>
    {{/for}}
  </tbody>
</table>

With AngularJs:

<table>
  <thead>
    <tr>
      <th>Stuff</th>
      <th>Stuff2</th>
    </tr>
  </thead>
  <tbody>
    <div ng-repeat="element in myArray"> <!-- This gets removed since it's not a valid element for a table body -->
      <tr>
        <td>{{element.data}}</td>
        <td>{{element.data2}}</td>
      </tr>
      <tr class="special-row">
        <td>{{element.otherData}}</td>
        <td>{{element.otherData2}}</td>
      </tr>
    </div>
  </tbody>
</table>

I cannot have a <div> inside of my table body to put the ng-repeat on. How can I do this?

I'm trying to transition from jsRender to AngularJs and can't seem to figure out how to generate multiple table rows with ng-repeat.

With renderJs:

<table>
  <thead>
    <tr>
      <th>Stuff</th>
      <th>Stuff2</th>
    </tr>
  </thead>
  <tbody>
    {{for myArray}} <!-- Creates two rows per item in array -->
    <tr>
      <td>{{data}}</td>
      <td>{{data2}}</td>
    </tr>
    <tr class="special-row">
      <td>{{otherData}}</td>
      <td>{{otherData2}}</td>
    </tr>
    {{/for}}
  </tbody>
</table>

With AngularJs:

<table>
  <thead>
    <tr>
      <th>Stuff</th>
      <th>Stuff2</th>
    </tr>
  </thead>
  <tbody>
    <div ng-repeat="element in myArray"> <!-- This gets removed since it's not a valid element for a table body -->
      <tr>
        <td>{{element.data}}</td>
        <td>{{element.data2}}</td>
      </tr>
      <tr class="special-row">
        <td>{{element.otherData}}</td>
        <td>{{element.otherData2}}</td>
      </tr>
    </div>
  </tbody>
</table>

I cannot have a <div> inside of my table body to put the ng-repeat on. How can I do this?

Share Improve this question asked Jan 30, 2016 at 2:52 Douglas Gaskell 10.1k12 gold badges80 silver badges135 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 9

You should do it like this

<table>
  <thead>
    <tr>
      <th>Stuff</th>
      <th>Stuff2</th>
    </tr>
  </thead>
  <tbody>
      <tr ng-repeat-start="element in myArray">
        <td>{{element.data}}</td>
        <td>{{element.data2}}</td>
      </tr>
      <tr ng-repeat-end class="special-row">
        <td>{{element.otherData}}</td>
        <td>{{element.otherData2}}</td>
      </tr>
  </tbody>

https://jsfiddle/feq6pe7m/1/

<body ng-app="SampleApp">
  <table ng-controller="fcController" border="1px">
    <thead>
      <tr>
        <th>Stuff</th>
        <th>Stuff2</th>
      </tr>
    </thead>
    <tbody ng-repeat="element  in myArray">
      <tr>
        <td>{{element .Data1}}</td>
        <td>{{element .Data2}}</td>
      </tr>
      <tr class="special-row">
        <td>{{element.OtherData1}}</td>
        <td>{{element.OtherData2}}</td>
      </tr>
    </tbody>
  </table>
</body>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How can I use ng-repeat in a table body to encompass multiple rows? - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)