Html 在angularjs中使用ng repeat创建动态表

我想根据来自webapi的json对象生成具有动态表头和行/列的动态表

下面是每次出现的json对象的示例

[
{“国家”：“澳大利亚”，“碳粉数量”：8}，
{“国家”：“中国”，“碳粉数量”：6}，
{“国家”：“印度”，“碳粉数量”：11}，
{“国家”：“韩国”，“碳粉量”：1}
]

有时它会像

[
{“客户名称”：“福特”，“澳大利亚”：0，“中国”：2，“印度”：0，“韩国”：0}，
{“客户名称”：“ICICI保诚”、“澳大利亚”：0、“中国”：0、“印度”：5、“韩国”：0}，
{“客户名称”：“金伯利克拉克”，“澳大利亚”：0，“中国”：0，“印度”：0，“韩国”：1}，
{“客户名称”：“麦当劳”，“澳大利亚”：1，“中国”：0，“印度”：0，“韩国”：0}，
{“客户名称”：“诺华”，“澳大利亚”：1，“中国”：0，“印度”：0，“韩国”：0}，
{“客户名称”：“原产能源”，“澳大利亚”：3，“中国”：0，“印度”：0，“韩国”：0}
]

所以我已经尝试过了，但无法实现带有标题和行/列的动态表

我的html代码像

{{th}
{{previewData.Country}
{{previewData['碳粉总量]}

逻辑是通过使用

object.keys

在第一个对象道具上迭代来获取标题

要仅获取单元格本身的值，可以在某些对象中使用

（键，值）执行
ng repeat

以下是一个完整的示例：


angular.module（'app'，[]）。
控制器（'ctrl'，函数（$scope）{
$scope.data1=[
{“国家”：“澳大利亚”，“碳粉数量”：8}，
{“国家”：“中国”，“碳粉数量”：6}，
{“国家”：“印度”，“碳粉数量”：11}，
{“国家”：“韩国”，“碳粉量”：1}
];
$scope.data2=[
{“客户名称”：“福特”，“澳大利亚”：0，“中国”：2，“印度”：0，“韩国”：0}，
{“客户名称”：“ICICI保诚”、“澳大利亚”：0、“中国”：0、“印度”：5、“韩国”：0}，
{“客户名称”：“金伯利克拉克”，“澳大利亚”：0，“中国”：0，“印度”：0，“韩国”：1}，
{“客户名称”：“麦当劳”，“澳大利亚”：1，“中国”：0，“印度”：0，“韩国”：0}，
{“客户名称”：“诺华”，“澳大利亚”：1，“中国”：0，“印度”：0，“韩国”：0}，
{“客户名称”：“原产能源”，“澳大利亚”：3，“中国”：0，“印度”：0，“韩国”：0}
];
$scope.getHeaders=函数（arr）{
返回Object.keys（arr[0]）；
};
});

{{header}}
{{value}}

{{header}}
{{value}}
您可以在另一个内部使用
ng repeat
。并且，使用第一行呈现标题

注意
ngRepeat
：出于某种原因，
angularjs@1.4.0
以前的版本在使用
ng repeat
时按
键入对象按字母顺序对键进行排序。一个简单的修复方法是升级到
angularjs@^1.4.0
，这就是他们修复它的地方

由angular docs宣布此更改：

您需要知道，JavaScript规范没有定义为对象返回的键的顺序。（为了缓解Angular 1.3中的这种情况，ngRepeat指令用于按字母顺序对键进行排序。）

版本1.4删除了字母排序。现在，我们依靠浏览器在myObj中运行密钥时返回的顺序。看起来浏览器通常遵循按照定义键的顺序提供键的策略，尽管在删除和恢复键时也有例外。看

参考号：

以下代码段实现了此解决方案


angular.module（'myApp'，[]）
.controller（'myController'，函数（$scope）{
$scope.myArray=[
{“客户名称”：“福特”，“澳大利亚”：0，“中国”：2，“印度”：0，“韩国”：0}，
{“客户名称”：“ICICI保诚”、“澳大利亚”：0、“中国”：0、“印度”：5、“韩国”：0}，
{“客户名称”：“金伯利克拉克”，“澳大利亚”：0，“中国”：0，“印度”：0，“韩国”：1}，
{“客户名称”：“麦当劳”，“澳大利亚”：1，“中国”：0，“印度”：0，“韩国”：0}，
{“客户名称”：“诺华”，“澳大利亚”：1，“中国”：0，“印度”：0，“韩国”：0}，
{“客户名称”：“原产能源”，“澳大利亚”：3，“中国”：0，“印度”：0，“韩国”：0}
];
});
元素（文档）.ready（函数（）{
引导（文档，['myApp']）；
});
表格{
边界塌陷：塌陷；
}
运输署，
th{
填充物：2px4px；
}

{{key}}
{{column}}
我使用的是angular 1.6


此处标记的列及其值都是动态的。
我的表格结构如下

<table class="table table-bordered table-hover">
    <thead>
        <tr>
           <th>Doctor</th>
           <th>Target</th>
           <th ng-repeat="brand in doctorTargets.brands">{|| brand.name ||}</th>
         </tr>
    </thead>
    <tbody>
        <tr ng-repeat="item in doctorTargets.doctorTargets">
           <td>{|| item.doctorName ||}</td>
           <td>{|| item.target ||}</td>
           <td ng-repeat="brand in item.brands">{||brand.target||</td>                                    
        </tr>
     </tbody>
</table>


医生
目标
{brand.name}
{| | item.doctorName | |}
{| | item.target |}
{| |品牌.目标| |
到目前为止您做了什么？您的代码在哪里？您尝试过的代码什么是
dataconfigureListData
？$scope.dataconfigureListData.previewData=data.ResponseData；它存储来自web apiAns的数据什么
{dataconfigureListData.previewData | json}
prints？ng repeat中动态数据的完美示例。非常感谢。：-@Lenilson de CastroI使用了您所解释的，然后我得到了表格，但列是按字母顺序排列的。如果我们看一下答案，则列顺序为
澳大利亚、中国、客户名称、印度、韩国
@charantej您指的是什么“列是按字母顺序排列的”？此模型假定对象的顺序是一致的，即数组中的所有对象必须具有相同的结构和顺序。
{CustomerName:string，Australia:number，China:number，India:number，South Korea:number}
@LenilsondeCastro For me，如果我传递相同的数组表头com