我正在尝试展平嵌套的 json 对象并将其显示在表格中。
所以我尝试在一个 div 中使用多个 ng-repeat-start 和 ng-repeat-end 元素。 但是不知何故数据没有显示。
笨蛋: http://plnkr.co/edit/apuf9YUYnkoSaCDaNYrC?p=preview
HTML :
<!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
你好 |level 1 title 1 |level 2 title 1 |a 1
你好 |level 1 title 1 |level 2 title 1 |b 1
你好 0 |级别 1 标题 0 |级别 2 标题 0 |a 0
你好 0 |级别 1 标题 0 |级别 2 标题 0 |b 0
你好 0 |级别 1 标题 1 0 |级别 2 标题 1 0 |a 1 0
你好 0 |级别 1 标题 1 0 |级别 2 标题 1 0 b 1 0
最佳答案
我认为问题出在您的 HTML 上。最有可能在您的表中有 div。如果将其转换为 <div>然后就可以了。我看到的另一个问题是您重复关闭 </body>标签。
我明白你为什么用 <div> 来做这件事s 和 ng-if秒。曾经有一个 ng-repeat 的注释指令版本，或者至少努力创造一个，但我认为他们遇到了 browser limitations .
这是一个similar issue .也许您会喜欢他们的解决方案。
否则，替换你的<div>与 <tr>小号:
<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>
关于javascript - 多个嵌套的ng-repeat-start无法显示数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39976677/