Question

我是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>

我需要做些什么来实现同样的目标？请解释一下。

Answer 1

试试这个。你必须把ng-repeat放在td而不是row。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

除了你的HTML，一切都很好。

您的第一个ng-repeat国家/地区应为<tr>

第二个应该是<td>

tbody不应该重复，正如这里的一些答案所示。根据{{3}} 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>

Angular JS表中的嵌套ng-repeat

3 个答案: