使用ng-repeat的嵌套表
使用ng-repeat的嵌套表
提问于 2013-11-19 10:33:29
我要做的是重复三个层次。
演示：http://plnkr.co/edit/qXLcPHXDlOKZYI5jnCIp?p=preview
<table>
<thead>
<tr>
<td>Block</td>
<td>Column</td>
<td>Unit</td>
<td>Action</td>
</tr>
</thead>
<tbody ng-repeat="block in building.ownBlock">
<tr ng-repeat="column in block.ownColumn">
<td>{{block.name}}</td>
<td>{{column.number}}</td>
<td>{{unit.name}} - ? empty</td>
<td><button ng-click="edit(unit)">Edit</button></td>
</tr>
</tbody>
</table>但我没有做到这一点。
集合
$scope.building =
{
id: 1,
name: 'first',
ownBlock: [
{
id: 1,
name: 'Block 1',
ownColumn: [
{
id: 1,
number: 'Column 1-1',
ownUnit: [
{
id: 1,
number: 'Unit 1-1-1'
},
{
id: 2,
number: 'Unit 1-1-2'
}
]
},
{
id: 2,
number: 'Column 1-2',
ownUnit: [
{
id: 3,
number: 'Unit 1-2-3'
},
{
id: 4,
number: 'Unit 1-2-4'
}
]
}
]
},
{
id: 2,
name: 'Block 2',
ownColumn: [
{
id: 3,
number: 'Column 2-3',
ownUnit: [
{
id: 5,
number: 'Unit 2-3-5'
},
{
id: 6,
number: 'Unit 2-3-6'
}
]
},
{
id: 4,
number: 'Column 2-4',
ownUnit: [
{
id: 7,
number: 'Unit 2-4-7'
},
{
id: 8,
number: 'Unit 2-4-8'
}
]
}
]
}
]
};使用KnockoutJS，我可以使用虚拟中继器，例如。
<!-- ko foreach: items -->
<li data-bind="text: $data"></li>
<!-- /ko -->我编写了一个指令，但'ng-click="edit(unit)"‘不起作用。也许是因为我使用element.replaceWith( HTML )；来代替指令HTML。
任何帮助都是非常感谢的。谢谢
回答 2
Stack Overflow用户
发布于 2013-11-19 11:08:00
您可以尝试这样的操作，这取决于模型的稳定状态。
<body>
<table>
<thead>
<tr>
<td>Block</td>
<td>Column</td>
<td ng-repeat="unit in building.ownBlock[0].ownColumn[0].ownUnit[0]">Unit</td>
<td>Action</td>
</tr>
</thead>
<tbody ng-repeat="block in building.ownBlock">
<tr ng-repeat="column in block.ownColumn">
<td>{{block.name}}</td>
<td>{{column.number}}</td>
<td ng-repeat="unit in column.ownUnit">{{unit.number}} - ? empty</td>
<td><button ng-click="edit(unit)">Edit</button></td>
</tr>
</tbody>
</table>
<pre>
{{toedit|json}}
</pre>
Stack Overflow用户
发布于 2013-11-19 12:46:08
您将需要使用Angular 1.2中添加的新的ng-repeat-start和ng-repeat-end指令。有关示例，请参阅文档。
http://docs.angularjs.org/api/ng.directive:ngRepeat
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20062032
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号