Nested Ng-repeat In Angular Js Table

January 31, 2024 Post a Comment

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 .m

Solution 1:

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"
                        }
                    ];
                   
                });

<scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><divng-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><tbodyng-repeat="country in countries"><tr><td>{{ country.name }}</td><tdng-repeat="city in country.cities">
                        {{city.name}}
                    </td><td><imgng-src="{{country.flag}}"></td></tr></tbody></table></div></div>

Solution 2:

repeat a little and it works as you need it.

<tbodyng-repeat="country in countries"><tr ><td >{{ country.name }}</td><tdng-repeat="city in country.cities">
                        {{city.name}}
                    </td><td><imgng-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;
                });

<scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><!DOCTYPE html><htmlxmlns="http://www.w3.org/1999/xhtml"ng-app="myModule"><head><title></title><scriptsrc="Scripts/angular.js"></script></head><bodyng-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><tbodyng-repeat="country in countries"><tr ><td >{{ country.name }}</td><tdng-repeat="city in country.cities">
                        {{city.name}}
                    </td><td><imgng-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;
                });

Solution 3:

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 tbodytbody 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><trng-repeat="country in countries"><td >{{ country.name }}</td><tdng-repeat="city in country.cities">
                {{city.name}}
            </td><td><imgng-src="{{country.flag}}"></td></tr></tbody>

Html5 Guru

Nested Ng-repeat In Angular Js Table

Solution 1:

Solution 2:

Solution 3:

Post a Comment for "Nested Ng-repeat In Angular Js Table"