[英]How to build a full dynamic template in Angular?
我想请角度社区帮助我找到解决此问题的最佳方法:
我在json中有这样的数据:
{
"id": "0001",
"type": "donut",
"name": "Cake",
"ppu": 0.55,
"topping":
[
{ "id": "5001", "type": "None" },
{ "id": "5002", "type": "Glazed" },
{ "id": "5005", "type": "Sugar" },
{ "id": "5007", "type": "Powdered Sugar" },
{ "id": "5006", "type": "Chocolate with Sprinkles" },
{ "id": "5003", "type": "Chocolate" },
{ "id": "5004", "type": "Maple" }
]
}
和类似的数据:
{
"id": "0001",
"gloss": "donut",
"test": "Cake",
"ppu": 0.55,
"batter":
[
{ "id": "1001", "name": "Regular" },
{ "id": "1002", "name": "Chocolate" },
{ "id": "1003", "name": "Blueberry" },
{ "id": "1004", "name": "Devil's Food" }
]
}
在每种情况下,我都希望数据位于简单表中,但列中具有不同的字段。
例如,我想在第一个中获取:id,type,topping.type,在第二个中获取:id,gloss,ppu,topping.type,name
是否有可能使用可以处理两种情况(以及其他两种情况)的自定义模板或指令来解决此类问题,从而避免制作多个笨拙的相似模板?
如果您需要更高的精度,我可以为您提供更多详细信息。 谢谢。
PS:奖金,关于角度2的相同问题(即使我实际上在角度1中也需要它)。
编辑:好的,我们开始:我需要得到类似的东西: https ://plnkr.co/edit/iBENCVpRdohwAtm4AA54但是我完全不知道我如何才能做到这一点,假设data1.json和data2.json仅在这里例如,数据来自Web服务。 但我正在寻找解决此类问题的全球解决方案。
是的,您应该使用字段配置创建指令,如下所示:
var config = [{
title: 'Column name',
renderer: function valueRenderer(item){ return item.id}
}];
并像
<table>
<thead>
<th ng-repeat="column in config" ng-bind="column.title">
</thead>
<tbody>
<tr ng-repeat="item in data">
<td ng-repeat="column in config" ng-bind="column.renderer(item)"></td>
</tr>
</tbody>
</table>
并将其包装在指令中
<my-dir config="ctrl.config" data="ctrl.data"></my-dir>
指示:
module.directive('myDir', function(){
return {
restrict: 'E',
scope: {
data: '=',
config: '='
},
template: '<table ....'
};
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.