使用 ng-repeat 的嵌套表 [英] nested table using ng-repeat
本文介绍了使用 ng-repeat 的嵌套表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想做的是重复三个级别.
演示:http://plnkr.co/edit/qXLcPHXDlOKZYI5jnCIp?p=preview
<头><tr><td>块</td><td>列</td><td>单位</td><td>动作</td></tr></thead><tbody ng-repeat="block in building.ownBlock"><tr ng-repeat="block.ownColumn 中的列"><td>{{block.name}}</td><td>{{column.number}}</td><td>{{unit.name}} - ?空</td><td><button ng-click="edit(unit)">编辑</button></td></tr></tbody>
但我没有这样做.
收藏
$scope.building ={编号:1，name: '第一',自己的块:[{编号:1，name: 'Block 1',自己的专栏:[{编号:1，number: '第 1-1 列',自己的单位:[{编号:1，编号:'单元 1-1-1'},{编号:2，编号:'单元 1-1-2'}]},{编号:2，number: '第 1-2 列',自己的单位:[{编号:3，编号:'单元 1-2-3'},{编号:4，编号:'单元 1-2-4'}]}]},{编号:2，name: 'Block 2',自己的专栏:[{编号:3，number: '第 2-3 列',自己的单位:[{编号:5，编号:'单元 2-3-5'},{编号:6，编号:'单元 2-3-6'}]},{编号:4，number: '第 2-4 列',自己的单位:[{编号:7，编号:'单元 2-4-7'},{编号:8，编号:'单元 2-4-8'}]}]}]};使用 KnockoutJS 我可以使用虚拟中继器，例如.
<li data-bind="text: $data"></li><!--/ko -->我编写了一个指令，但 'ng-click="edit(unit)"' 不起作用.也许是因为我正在使用 element.replaceWith(html);替换指令 HTML.
非常感谢任何帮助.谢谢
解决方案
您可以尝试类似的方法，具体取决于您的模型的稳定状态.
<表格><头><tr><td>块</td><td>列</td><td ng-repeat="unit in building.ownBlock[0].ownColumn[0].ownUnit[0]">Unit</td><td>动作</td></tr></thead><tbody ng-repeat="block in building.ownBlock"><tr ng-repeat="block.ownColumn 中的列"><td>{{block.name}}</td><td>{{column.number}}</td><td ng-repeat="unit in column.ownUnit">{{unit.number}} - ?空</td><td><button ng-click="edit(unit)">编辑</button></td></tr></tbody><预>{{toedit|json}}What I'm trying to do is repeat three levels.
Demo: 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>
but I have failed to do so.
Collection
$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'
}
]
}
]
}
]
};
Using KnockoutJS I could use virtual repeaters eg.
<!-- ko foreach: items -->
<li data-bind="text: $data"></li>
<!-- /ko -->
I coded a directive, but 'ng-click="edit(unit)"' just doesn't work. Maybe because I'm using element.replaceWith(html); to replace the directive HTML.
Any help is much appreciated. Thank you
解决方案
You could try something like this, depending on the steady state of your models.
<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>
这篇关于使用 ng-repeat 的嵌套表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
