在Angular JS表中嵌套ng重复

Nested ng-repeat in Angular JS table

本文关键字：嵌套 ng 重复 Angular JS      更新时间：2023-09-26

我是Angular JS的新手。我一直在尝试迭代一个模型集合，并将其显示在表中。

模型看起来像：

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

我希望表格结构是

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

但是我不能在html页面上做同样的事情。

到目前为止，代码看起来像：

<!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>

我需要做些什么才能达到同样的效果？请解释。

试试这个。你必须把ng-reeat放在td而不是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>

重复一点，它就可以根据需要工作。

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

除了HTML之外，一切都很好。

您针对国家/地区的第一个ng-repeat应该是针对<tr>

第二个应该用于<td>

tbody不应该像这里的一些答案所看到的那样被重复。根据w3c HTML5规范，黑体tbody是thead 之后的单个元素

您正处于正确的轨道上，只需记住ng-repeat将重复指定为属性的元素。

    <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>
相关文章：