嵌套NG-重演角JS表 [英] Nested ng-repeat in Angular JS table
本文介绍了嵌套NG-重演角JS表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是一个新手，角JS。
我已经通过一个模型集合试图迭代并显示在同一个表中。
示范如下：
VAR MyModule的角度=
.module（MyModule的，[]）
.controller（myController的功能（$范围）{
VAR国家= [
{
名称：UK，
城市：
{名：伦敦}，
{名：伯明翰}，
{名：Manchestar}
]
标志：/图片/ UK.gif
}，
{
名称：USA，
城市：
{名：洛杉矶}，
{名：休斯敦}，
{名：佛罗里达}，
]
标志：/图片/ USA.png
}
];
$ scope.countries =国家;
}）;
和我想的表结构为
国家City1城2请分享帮助国旗
英国伦敦伯明翰Manchestar .....
美国 ...... ......... ......... .....
但我不能做同样的html页面。
到目前为止，code如下：
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML的xmlns =http://www.w3.org/1999/xhtmlNG-应用=MyModule的＆GT;
＆LT; HEAD＆GT;
＆LT;标题＆GT;＆LT; /标题＆GT;
＆LT;脚本SRC =脚本/ angular.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =脚本/ MyModuleScript.js＆GT;＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;机身NG控制器=myController的＆GT;
＆LT; DIV＆GT;
＆LT;表＆gt;
＆LT;＆THEAD GT;
＆所述; TR＆GT;
＆LT;第i个国家＆LT; /第i
＆LT;第i个城市1 LT; /第i
＆LT;第i个城市2'; /第i
＆LT;第i个城市第3版/第i
＆LT;第i个旗＆LT; /第i
＆LT; / TR＆GT;
＆LT; / THEAD＆GT;
＆LT; TBODY NG重复=国国＆GT;
＆LT; TR NG重复=全城country.cities＆GT;
＆所述; TD＆GT; {{country.name}}＆下; / TD＆GT;
＆所述; TD＆GT;
{{......}}
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; / TBODY＆GT;
＆LT; /表＆gt;
＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
我需要做什么来达到同样的？请解释一下。
解决方案
试试这个。你必须把NG重复上TD，而不是一行。
\r
\r\r
\r VAR MyModule的角度=\r
.module（MyModule的，[]）\r
.controller（myController的功能（$范围）{\r
$ scope.countries = [\r
{\r
名称：UK，\r
城市：\r
{名：伦敦}，\r
{名：伯明翰}，\r
{名：Manchestar}\r
]\r
标志：/图片/ UK.gif\r
}，\r
{\r
名称：USA，\r
城市：\r
{名：洛杉矶}，\r
{名：休斯敦}，\r
{名：佛罗里达}，\r
]\r
标志：/图片/ USA.png\r
}\r
];\r
\r
}）; \r
＆LT;脚本SRC =https://ajax.googleapis.com/ajax /libs/angularjs/1.2.23/angular.min.js\"></script>\r
＆LT; DIV NG-应用=MyModule的NG控制器=myController的＆GT;\r
＆LT; DIV＆GT;\r
＆LT;表＆gt;\r
＆LT;＆THEAD GT;\r
＆所述; TR＆GT;\r
＆LT;第i个国家＆LT; /第i\r
＆LT;第i个城市1 LT; /第i\r
＆LT;第i个城市2'; /第i\r
＆LT;第i个城市第3版/第i\r
＆LT;第i个旗＆LT; /第i\r
＆LT; / TR＆GT;\r
＆LT; / THEAD＆GT;\r
＆LT; TBODY NG重复=国国＆GT;\r
＆所述; TR＆GT;\r
＆所述; TD＆GT; {{country.name}}＆下; / TD＆GT;\r
＆LT; TD NG重复=全城country.cities＆GT;\r
{{城市名}}\r
＆LT; / TD＆GT;\r
＆LT; TD＆GT;＆LT; IMG NG-SRC ={{country.flag}}＆GT;＆LT; / TD＆GT;\r
＆LT; / TR＆GT;\r
＆LT; / TBODY＆GT;\r
＆LT; /表＆gt;\r
＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT; \r
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.
解决方案
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>
这篇关于嵌套NG-重演角JS表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
