ng-repeat inside ng-repeat creates empty td element – Angular

I’ve a little odd problem when using two ng-repeat for objects which contain arrays. Here is the Angular HTML-Code:

<tr data-ng-repeat="reqs in requirements | orderBy:['categoryOrder','order']">
<td><strong>{{reqs.category}}</strong></td>
<td data-ng-repeat="values in reqs.values | orderBy:'showOrder'"><div data-ng-repeat="(key,value) in values" data-ng-if="key!='showOrder'">{{value}}</div><td>
</tr>

The table will be displayed fine and the data also looks fine. My only problem is, that after each tr an empy td element will be insert without any class and I can’t get rid of it. Here is the outputted HTML:

<tr class="ng-scope" data-ng-repeat="reqs in requirements | orderBy:['categoryOrder','order']">
<td>
<strong class="ng-binding">Foobar</strong>
</td>
<td class="ng-scope" data-ng-repeat="values in reqs.values | orderBy:'showOrder'">
<td class="ng-scope" data-ng-repeat="values in reqs.values | orderBy:'showOrder'">
<td class="ng-scope" data-ng-repeat="values in reqs.values | orderBy:'showOrder'">
<td> </td>
</tr>

Does anyone else has experienced this kind of odd behaviour? The td element is completely empty and doesn’t even has a class attribute assigned to it. Here is the object I’m using:

category: "Foobar"
categoryOrder: 10
description: "Some desc"
id: 2
order: 10
shortName: "SM-01"
values: [
0: {Foo: "Bar", showOrder: 1},
1: {Bar: "Foo", showOrder: 2},
2: {Meh: "Mah", showOrder: 3}
]

I’m using AngularJS 1.3.0. Any help is appreciated, as this is driving me nuts :).

Ares


Source: html

Leave a Reply