Making Nested ng-repeat in AngularJS dynamic

Question

I'm trying to implement a table using ng-repeat for the following data :

    [{
    "Name": "Alfreds Futterkiste",
    "City": "Berlin",
    "Country": "Germany"
}, {
    "Name": "Berglunds snabbköp",
    "City": "Luleå",
    "Country": "Sweden"
}]

Here is my AngularJS code :

<table>
    <tr ng-repeat="d in stuff">
        <td>
            {{d.Name}}    
        </td>
        <td>
            {{d.Country}}
        </td>
        <td>
            {{d.City}}
        </td>
    </tr>
</table>

The above code works fine but the number of td has been hard coded. Is there any way to make it dynamic.

use angular template? http://www.jptacek.com/2014/02/angularJS-templates/ Not as elegant a solution as Simon has proposed, but would be a possibility for a variety of mixed data content. — zipzit
– zipzit, Commented Jan 5, 2015 at 11:17

Simon Staton · Accepted Answer · 2015-01-05 11:10:10Z

2

Add a second ng-repeat to your table:

<table>
    <tr ng-repeat="d in stuff">
        <td ng-repeat="(key, value) in d">
            {{value}}    
        </td>
    </tr>
</table>

Its worth noting this will only be valid markup if all results in d are equal in length.

answered Jan 5, 2015 at 11:10

Simon Staton

4,5054 gold badges32 silver badges50 bronze badges

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

8 Comments

Kalhan Over a year ago

this is change the order of the column, because of angular will sort the object field according to key.

Simon Staton Over a year ago

if you want a custom order you can use angulars orderBy in your ng-repeat... docs.angularjs.org/api/ng/filter/orderBy

Kalhan Over a year ago

orderBy do not change the order of the columns instead it will order the table rows.

Simon Staton Over a year ago

Use it in the second ng-repeat so the <td></td> is ordered.

Kalhan Over a year ago

using orderBy will re-order the data apear in the table it will not change the order of the columns

|

Collectives™ on Stack Overflow

Making Nested ng-repeat in AngularJS dynamic

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related