Search code examples
javascripthtmlangularjsangularjs-ng-repeatangular-ng-if

Ng-repeat unexpected multiple repeat

I have an object that looks like this:

enter image description here

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:

enter image description here

Current result:

enter image description here

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

enter image description here

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

Solution

  • 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.