Javascript 多重嵌套ng重复启动无法显示数据
我试图将嵌套的json对象展平并显示在表中 所以我尝试在一个div中使用多个ng repeat start&ng repeat end元素。 但不知何故,数据并没有显示出来 普朗克: HTML:Javascript 多重嵌套ng重复启动无法显示数据,javascript,angularjs,angularjs-ng-repeat,Javascript,Angularjs,Angularjs Ng Repeat,我试图将嵌套的json对象展平并显示在表中 所以我尝试在一个div中使用多个ng repeat start&ng repeat end元素。 但不知何故,数据并没有显示出来 普朗克: HTML: <!DOCTYPE html> <html ng-app="plunker"> <head> <meta charset="utf-8" /> <title>AngularJS Plunker</title>
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.22/angular.js" data-semver="1.2.22"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
Data is :
{{mydata}}
<table cellspacing="1" border="1">
<thead>
<tr>
<td> MainTitle</td>
<td> SubTitle</td>
<td> LastTitle</td>
<td> Final</td>
</tr>
</thead>
<tbody>
<div ng-repeat-start="main in mydata" ng-if="false"></div>
<div ng-repeat-start="sub in main.items" ng-if="false"></div>
<div ng-repeat-start="last in sub.l2items" ng-if="false"></div>
<tr ng-repeat="final in last.l3items">
<td> {{main.title}} </td>
<td> {{sub.title}} </td>
<td> {{last.title}} </td>
<td> {{final}} </td>
</tr>
</tbody>
<div ng-repeat-end ng-if="false"></div>
<div ng-repeat-end ng-if="false"></div>
<div ng-repeat-end ng-if="false"></div>
</table>
</body>
</html>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.mydata = [
{
title :"hello",
items : [
{
title: "level 1 title",
l2items : [
{
title : "level 2 title",
l3items: [ "a","b" ]
}
]
}
,
{
title: "level 1 title 1 ",
l2items : [
{
title : "level 2 title 1",
l3items: [ "a 1","b 1" ]
}
]
}
]
},{
title :"hello 0",
items : [
{
title: "level 1 title 0",
l2items : [
{
title : "level 2 title 0",
l3items: [ "a 0","b 0" ]
}
]
}
,
{
title: "level 1 title 1 0",
l2items : [
{
title : "level 2 title 1 0",
l3items: [ "a 1 0","b 1 0" ]
}
]
}
],
}]
});
预期输出:(抱歉无法创建正确的表)
主标题|副标题|最后标题|决赛
你好|一级职称|二级职称| a
你好|一级职称|二级职称| b
你好| 1级标题1 | 2级标题1 | a 1
你好|一级标题1 |二级标题1 | B1
你好0 |一级标题0 |二级标题0 | a 0
你好0 |一级标题0 |二级标题0 | b 0
你好0 | 1级标题10 | 2级标题10 | a 1 0
您好0 | 1级标题10 | 2级标题10 b 1 0我相信问题在于您的HTML。很可能你的桌子里有div。如果您将其转换为
s,则它可以工作。我看到的另一个问题是,您重复了结束标记
我理解你为什么用
s和ng if
s来做这件事。曾经有一个注释指令版本的ng repeat
,或者至少是一个创建版本的努力,但我认为他们遇到了问题
这是一本书。也许你会喜欢他们的解决方案
否则,请将
s替换为
s:
<tr ng-repeat-start="main in mydata" ng-if="false"></tr>
<tr ng-repeat-start="sub in main.items" ng-if="false"></tr>
<tr ng-repeat-start="last in sub.l2items" ng-if="false"></tr>
<tr ng-repeat="final in last.l3items">
<td> {{main.title}} </td>
<td> {{sub.title}} </td>
<td> {{last.title}} </td>
<td> {{final}} </td>
</tr>
<tr ng-repeat-end ng-if="false"></tr>
<tr ng-repeat-end ng-if="false"></tr>
<tr ng-repeat-end ng-if="false"></tr>
{{main.title}
{{sub.title}}
{{last.title}
{{final}}
如果您希望在表中使用该元素,为什么不在将其传递到视图之前映射到展开的数组?您可以尝试使用元素来删除多余的元素tags@JoaozitoPolo我用它做了实验,但它仍然不起作用@charlietfl展平是我最后的选择,因为阵列有6层深。因此,人们认为直接通过angular来管理它,这将是非常昂贵的嵌套,当你想要的是一个平面显示器时,会重复很多次。与先展平数据相比,您将付出巨大的性能损失