Ng-repeat unexpected multiple repeat

Question

I have an object that looks like this:

So basically I don't know the length of the object and I'm using the following code to render the result:

<table style="width: 100%" border="0" cellpadding="0" cellspacing="0">
    <tr ng-repeat-start="(key, item) in items() track by key" ng-if="item.primary"></tr>
        <td first someprop="2">first</td> 
    <tr ng-repeat-end ng-if="!item.primary">
        <td>[NOT] first</tr>
    </tr>
</table>

I want the first element in the table(it's also highlighted) to always be the object with the primary=true property.

Expected result with the object represented above:

Current result:

If I add a third element to the object, I'm getting:

FIDDLE: http://jsfiddle.net/UuzZT/

Answer 1

You have a simple semantic error in your HTML, specifically the ng-repeat-start element does not wrap the <td> so the <td> shows up each time even though the ng-if is there. Corrected here:

http://jsfiddle.net/UuzZT/1/

However, there are other problems stemming from the fact that you are trying to iterate over an object; objects do not have ordinal properties.

Answer 2

Your first table row does not include the table data (td outside tr)

Change your code to this:

<table style="width: 100%" border="0" cellpadding="0" cellspacing="0">
<tr ng-repeat-start="(key, item) in items() track by key" ng-if="item.primary">
    <td first someprop="2">first</td>
</tr> 
<tr ng-repeat-end ng-if="!item.primary">
    <td>[NOT] first</tr>
</tr>