Oam Psy Oam Psy - 4 days ago 4
HTML Question

AngularJS - Creating a new row when using ng-repeat

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

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