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

Answer 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

Answer 2

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