AngularJS - Creating a new row when using ng-repeat

Question

I'm using a simple ng-repeat to generate a list of countries and their corresponding data. Within each list is a hidden row that can be expanded and collapsed.

I'm struggling to get this hidden row to appear at the bottom of each row from the ng-repeat.

HTML:

<tr ng-repeat="country in countries">
   <td>{{country.name}}</td>
   <td>{{country.population}}</td>
   <td>{{country.currency}}</td>
   <td>{{country.gpd}}</td>

   <tr>
        <p>Expand/collapse content</p>
   </tr>
</tr>

Output:

France     61.3     EUR    54
Germany    81.5     EUR    82
Spain      12.7     EUR    78
UK         51.3     GBR    64
Expand/collapse content

Desired Output:

France     61.3     EUR    54
Expand/collapse content

Germany    81.5     EUR    82
Expand/collapse content

Spain      12.7     EUR    78
Expand/collapse content

UK         51.3     GBR    64
Expand/collapse content

Julien · Accepted Answer · 2014-04-24 11:25:48Z

1

You can use ng-repeat-start and ng-repeat-end as follow:

    <tr ng-repeat-start="country in countries">
       <td>{{country.name}}</td>
       <td>{{country.population}}</td>
       <td>{{country.currency}}</td>
       <td>{{country.gpd}}</td>
    </tr>
    <tr ng-repeat-end>
       <td>Expand/collapse content</td>
    </tr>

Working fiddle : http://jsfiddle.net/nYzjY/372/

Source: https://docs.angularjs.org/api/ng/directive/ngRepeat

edited Apr 24, 2014 at 11:25

answered Apr 24, 2014 at 11:02

Julien

2,2363 gold badges27 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Oam Psy Over a year ago

Thanks, do you have a working fiddle as this doesnt seem to work

Oam Psy Over a year ago

Thanks, im using v1.1.5 of Angular, would ng-repeat-start/end work with this version?

Julien Over a year ago

Since it's not mentioned in the documentation of the 1.1.5 version (code.angularjs.org/1.1.5/docs/api/ng.directive:ngRepeat), I think that won't work. By the way, I recommend you to migrate to the 1.2 version since the 1.1 versions were experimentals (see docs.angularjs.org/guide/migration)

Oam Psy Over a year ago

i would migrate, however ive read route and resource are separate libraries now, i'd rather use 1.1.5 to only have 1 http request

defau1t · Accepted Answer · 2014-04-24 11:17:51Z

1

You are repeating a tr and then you are inserting another tr after the repetition. Since you want both the tr's to be repeated. you should nest them in to one. e-g:

<div  ng-repeat="country in countries">
    <tr>
       <td>{{country.name}}</td>
       <td>{{country.population}}</td>
       <td>{{country.currency}}</td>
       <td>{{country.gpd}}</td>

       <tr>
            <p>Expand/collapse content</p>
       </tr>
    </tr>
    </div>

DEMO

edited Apr 24, 2014 at 11:17

answered Apr 24, 2014 at 10:59

defau1t

10.6k2 gold badges37 silver badges47 bronze badges

2 Comments

Oam Psy Over a year ago

@default - Thanks, do you have a working fiddle as this doesnt seem to work

Oam Psy Over a year ago

Thanks, im using v1.1.5 of Angular, would ng-repeat-start/end work with this version?

Collectives™ on Stack Overflow

AngularJS - Creating a new row when using ng-repeat

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related