Problems with ng-repeat-start

Question

This code works:

<table ng-repeat="tool in tools | filter:tag">
                <tr>
                  <colgroup width="auto" span="5"></colgroup>
                  <th>Name</th><th>Icons</th><th>Price</th><th>Trial</th><th>Url</th>
                </tr>
                <tr>
                  <td><i class="fa fa-3x fa-caret-up" ng-click="voteUp()"></i><span>{{answer.vote}}</span><i class="fa fa-3x fa-caret-down" ng-click=voteDown()></i><h3>{{tool.title}}</h3></td><td><span ng-repeat="tagWithMeta in tool.tagsWithMeta" class="tag-box"><span class="icon icon-{{tagWithMeta.unique_tag}}"/></span></span></td><td></td><td></td><td></td>
                </tr>
                <colgroup width="100%" span="2"></colgroup>
                <tr>
                  <td colspan="5">
                    <table>
                      <tr>
                        <td>A</td><td>B</td>
                      </tr>
                      <tr>
                        <td class="fifty">{{tool.description}}</td><td class="fifty"><span ng-repeat="tagWithMeta in tool.tagsWithMeta" class="tag-box">{{tagWithMeta.tag}}</span></td>
                      </tr>
                    </table>
                  </td>
                </tr>
              </table>

But the problem is that my tables then don't look equal.

If I use ng-repeat in <tbody> or if I use ng-repeat-start in the first <tr>-tag and close it on the last </tr> tag everything breaks and it shows only the nested ng-repeat (with the icons) correct.

According to these posts it should work. Angular.js ng-repeat across multiple tr's https://docs.angularjs.org/api/ng/directive/ngRepeat

Chrome Dev. tells me that I'm loading ajax.googleapis.com/ajax/libs/angularjs/1.2.14.

Any ideas?

Answer 1

You should not close the ng-repeat on the closing tag of the last element that you want repeated, but on the opening tag.

So if you only want to repeat a few table rows, remove the ng-repeat from table and go like below.

I corrected the formatting and also moved the second colgroup so that it is the child of the second table element (as it probably should have been).

<table>
  <colgroup width="auto" span="5"></colgroup>
  <tr ng-repeat-start="tool in tools | filter:tag">
    <th>Name</th>
    <th>Icons</th>
    <th>Price</th>
    <th>Trial</th>
    <th>Url</th>
  </tr>
  <tr>
    <td><i class="fa fa-3x fa-caret-up" ng-click="voteUp()"></i><span>{{answer.vote}}</span><i class="fa fa-3x fa-caret-down" ng-click=voteDown()></i><h3>{{tool.title}}</h3></td>
    <td><span ng-repeat="tagWithMeta in tool.tagsWithMeta" class="tag-box"><span class="icon icon-{{tagWithMeta.unique_tag}}"/></span></span></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr ng-repeat-end>
    <td colspan="5">
      <table>
        <colgroup width="100%" span="2"></colgroup>
        <tr>
          <td>A</td>
          <td>B</td>
        </tr>
        <tr>
          <td class="fifty">{{tool.description}}</td>
          <td class="fifty"><span ng-repeat="tagWithMeta in tool.tagsWithMeta" class="tag-box">{{tagWithMeta.tag}}</span></td>
        </tr>
      </table>
    </td>
  </tr>
</table>