16

Hi I have a simple use case for ng-repeat-start and end and is working just fine, the problem appears when I want to add an inner ng-repeat. Here is the my code

<tr ng-repeat-start="obj in rows" >
  <td ng-repeat="e in obj.row">{{e}}</td>
</tr>
<tr ng-repeat-end>
  <td colspan="4">{{obj.description}}</td>
<tr>

The inner ng-repeat into td element is not working, I'm seeing the ngRepeat comment when I inspect the html source code, but the td elements are not being created.

<!-- ngRepeat: e in obj.row -->

My ugly workaround (given that I know the size of that vector) is:

<tr ng-repeat-start="obj in rows" >
  <td>{{obj.row[0]}}</td>
  <td>{{obj.row[1]}}</td>
  <td>{{obj.row[2]}}</td>
  <td>{{obj.row[3]}}</td>
</tr>
<tr ng-repeat-end>
  <td colspan="4">{{obj.description}}</td>
<tr>
Jime
  • 195
  • 1
  • 1
  • 6

3 Answers3

18

I am not sure whether you are using angular 1.1.6 or not since ng-repeat-start and ng-repeat-end are not available in 1.1.5 or 1.0.7 yet.

However, you don't actually have to use the new directives to achieve that. You can simply implement it like this for right now:

<table>
    <tbody ng-repeat="obj in rows">
        <tr ng-repeat="e in obj.row">
            <td>{{e}}</td>
        </tr>
        <tr>
            <td colspan="4">{{obj.description}}</td>
        <tr>
    </tbody>
</table>

You may use ng-repeat-start and ng-repeat-end to reimplement it when AngularJS 1.1.6 version is officially released.

Demo

zs2020
  • 53,766
  • 29
  • 154
  • 219
  • Yes I'm using version 1.1.6. I like your solution I tried it before and it worked. What I don't like is the multiple tbody elements, because of that I give a try to this new feature. Thanks for your answer! – Jime Aug 09 '13 at 23:04
  • @Jime You need one `tbody` only. – zs2020 Aug 09 '13 at 23:06
  • 1
    @EliranMalka Thank you. Just want to make it more professional and easy to read :) – zs2020 Aug 09 '13 at 23:28
  • 4
    @sza the html code generated by that ng-repeat at tbody level will create several tbody elements. here is the code generated by your example (which is really good and useful)
    – Jime Aug 10 '13 at 01:08
  • 1
    Multiple tbody's seems to be valid according to this: http://stackoverflow.com/questions/3076708/can-we-have-multiple-tbody-in-same-table – joeriks Sep 29 '13 at 21:32
  • implementing like this would not let datatable work properly. as datatable is working for 1 tbody. – kanchan May 13 '17 at 17:28
2

I think it might be something wrong with your data structure. Using Angular 1.2.1 this works for me

<div ng-app="myApp" ng-controller="myCtrl">
    <div class="h" ng-repeat-start="val in data">{{val.title}}</div>
    <div ng-repeat="con in val.content">
        {{con}}
    </div>
    <div class="b" ng-repeat-end>footer</div>
</div>

See jsFiddle

NicolasMoise
  • 7,261
  • 10
  • 44
  • 65
1

You should be able to use index-based iterations to bypass that:

<tr ng-repeat-start="obj in rows" >
  <td ng-repeat="e in obj.row">{{obj.row[$index]}}</td>
</tr>
<tr ng-repeat-end>
<!-- ... -->
Eliran Malka
  • 15,821
  • 6
  • 77
  • 100
  • the problem is that the ng-repeat directive is not being resolved, either I use index based iteration or e object – Jime Aug 09 '13 at 22:33