Javascript 角度JS表中的嵌套ng重复_Javascript_Html_Angularjs

Javascript 角度JS表中的嵌套ng重复

javascript html angularjs

Javascript 角度JS表中的嵌套ng重复,javascript,html,angularjs,Javascript,Html,Angularjs,我是个新手。我一直在尝试迭代模型集合，并在表中显示相同的集合模型如下所示： var myModule = angular .module("myModule", []) .controller("myController", function ($scope) { var countries = [ {

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

模型如下所示：

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

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

我希望桌子的结构是

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

但是在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;
                });

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


国家
城市1
城市2
城市3
旗帜
{{country.name}
{{......}}

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

试试这个。您必须将ng repeat置于td而不是row上

var myModule=angular
.module（“myModule”，[]）
.controller（“myController”，函数（$scope）{
$scope.countries=[
{
名称：“英国”，
城市：[
{名称：“伦敦”}，
{名称：“伯明翰”}，
{名称：“曼彻斯特”}
],
标志：“/Images/UK.gif”
},
{   
名称：“美国”，
城市：[
{名称：“洛杉矶”}，
{姓名：“休斯顿”}，
{名称：“佛罗里达”}，
],
标志：“/Images/USA.png”
}
];
});

国家
城市1
城市2
城市3
旗帜
{{country.name}
{{city.name}
重复一点，它就可以根据需要工作
 <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>


国家
城市1
城市2
城市3
旗帜
{{country.name}
{{city.name}
除了HTML之外，一切都很好
您对国家/地区的第一次ng重复
应该是针对

第二个应该用于

t正文
不应该重复，正如这里的一些答案所示。根据t车身
是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>


{{country.name}
{{city.name}
非常感谢您的及时回复：）