Nested ng-repeat in Angular JS table

Question

I am a newbie to Angular JS. I have been trying iterate through a model collection and display the same in a table.

The Model looks like :

var myModule = angular
                .module("myModule", [])
                .controller("myController", function ($scope) {
                    var countries = [
                        {
                            name: "UK",
                            cities: [
                                    {name: "London"},
                                    {name: "Birmingham" },
                                    {name: "Manchestar" }
                            ],
                            flag:"/Images/UK.gif"
                        },
                        {   
                            name: "USA",
                            cities: [
                                    {name: "Los Angeles"},
                                    {name: "Houston"},
                                    {name: "Florida"},
                            ],
                            flag:"/Images/USA.png"
                        }
                    ];
                    $scope.countries = countries;
                });

And I want the table structure to be

Country City1  City2      City3      Flag
UK      London Birmingham Manchestar .....
USA     ...... .........  .........  .....

But I could not do the same in the html page.

So far the code looks like :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"  ng-app="myModule">
<head>
    <title></title>
    <script src="Scripts/angular.js"></script>
    <script src="Scripts/MyModuleScript.js"></script>
</head>
<body  ng-controller="myController">
    <div>
        <table>
            <thead>
                <tr>
                    <th>Country</th>
                    <th>City 1</th>
                    <th>City 2</th>
                    <th>City 3</th>
                    <th>Flag</th>
                </tr>
            </thead>
            <tbody ng-repeat="country in countries">
                <tr ng-repeat="city in country.cities">
                    <td>{{ country.name }}</td>
                    <td>
                        {{......}}
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

What I need to do to achieve the same ? Please explain.

Hadi · Accepted Answer · 2016-03-26 17:28:27Z

try this. you must put ng-repeat on td instead of row.

var myModule = angular
                .module("myModule", [])
                .controller("myController", function ($scope) {
                    $scope.countries = [
                        {
                            name: "UK",
                            cities: [
                                    {name: "London"},
                                    {name: "Birmingham" },
                                    {name: "Manchestar" }
                            ],
                            flag:"/Images/UK.gif"
                        },
                        {   
                            name: "USA",
                            cities: [
                                    {name: "Los Angeles"},
                                    {name: "Houston"},
                                    {name: "Florida"},
                            ],
                            flag:"/Images/USA.png"
                        }
                    ];
                   
                });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myModule" ng-controller="myController">
    <div>
        <table>
            <thead>
                <tr>
                    <th>Country</th>
                    <th>City 1</th>
                    <th>City 2</th>
                    <th>City 3</th>
                    <th>Flag</th>
                </tr>
            </thead>
            <tbody ng-repeat="country in countries">
                <tr>
                    <td>{{ country.name }}</td>
                    <td  ng-repeat="city in country.cities">
                        {{city.name}}
                    </td>
                  <td><img ng-src="{{country.flag}}"></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Theo Itzaris · Accepted Answer · 2016-03-26 17:44:58Z

repeat a little and it works as you need it.

 <tbody ng-repeat="country in countries">        
                <tr >                    
                    <td >{{ country.name }}</td>
                    <td ng-repeat="city in country.cities">
                        {{city.name}}
                    </td>
                    <td><img ng-src="{{country.flag}}"></td>
                </tr>
            </tbody>

var myModule = angular
                .module("myModule", [])
                .controller("myController", function ($scope) {
                    var countries = [
                        {
                            name: "UK",
                            cities: [
                                    {name: "London"},
                                    {name: "Birmingham" },
                                    {name: "Manchestar" }
                            ],
                            flag:"/Images/UK.gif"
                        },
                        {   
                            name: "USA",
                            cities: [
                                    {name: "Los Angeles"},
                                    {name: "Houston"},
                                    {name: "Florida"},
                            ],
                            flag:"/Images/USA.png"
                        }
                    ];
                    $scope.countries = countries;
                });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"  ng-app="myModule">
<head>
    <title></title>
    <script src="Scripts/angular.js"></script>
   
</head>
<body  ng-controller="myController">
    <div>
        <table>
            <thead>
                <tr>
                    <th>Country</th>
                    <th>City 1</th>
                    <th>City 2</th>
                    <th>City 3</th>
                    <th>Flag</th>
                </tr>
            </thead>
            <tbody ng-repeat="country in countries">
                
                <tr >                    
                    <td >{{ country.name }}</td>
                    <td ng-repeat="city in country.cities">
                        {{city.name}}
                    </td>
                    <td><img ng-src="{{country.flag}}"></td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

var myModule = angular
                .module("myModule", [])
                .controller("myController", function ($scope) {
                    var countries = [
                        {
                            name: "UK",
                            cities: [
                                    {name: "London"},
                                    {name: "Birmingham" },
                                    {name: "Manchestar" }
                            ],
                            flag:"/Images/UK.gif"
                        },
                        {   
                            name: "USA",
                            cities: [
                                    {name: "Los Angeles"},
                                    {name: "Houston"},
                                    {name: "Florida"},
                            ],
                            flag:"/Images/USA.png"
                        }
                    ];
                    $scope.countries = countries;
                });

bhantol · Accepted Answer · 2016-03-27 04:19:04Z

1

Everything is fine except your HTML.

Your first ng-repeat for countries should be for <tr>

The second one should be for <td>

tbody is not supposed to be repeated as seen by some of the answers here. As per w3c HTML5 Specs tbody tbody is single element after thead

You are on the right track just remember that ng-repeat will repeat the element on which it is specified as attribute.

    <tbody>        
        <tr ng-repeat="country in countries">                    
            <td >{{ country.name }}</td>
            <td ng-repeat="city in country.cities">
                {{city.name}}
            </td>
            <td><img ng-src="{{country.flag}}"></td>
        </tr>
    </tbody>

edited Mar 27, 2016 at 4:19

answered Mar 26, 2016 at 17:45

bhantol

9,6368 gold badges48 silver badges84 bronze badges

Collectives™ on Stack Overflow

Nested ng-repeat in Angular JS table

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related