angularjs - ng-repeat 不以表格格式显示数据
问题描述
下面的代码片段需要打印 toolDTO 对象(即对象数组,每个对象都有键值对)。
<div ng-show="isResult" style="color: green;">
<table class="tble">
<thead>
<tr ng-repeat="(key, value) in toolDTO[0]" align="center"
style="background: #7e7e7e; color: #FFFFFF; font-size: small;">
<th><b>{{key}}</b></th>
</tr>
</thead>
<tbody ng-repeat="tool in toolDTO">
<tr ng-repeat="(key, value) in tool"
style="font-size: small;">
<td>{{value}}</td>
</tr>
</tbody>
</table>
</div>
工具DTO结构:
[
{
"EMPLOYEE_NUMBER": "1234",
"FIRST_NAME": "Ram",
"LAST_NAME": "Rakul",
"EMAIL": "Ram.Rakul@example.com",
"UPDATED_BY": 5678,
"UPDATED_DATE": "2018-01-23 17:25:42.635"
},
{
"EMPLOYEE_NUMBER": "45678",
"FIRST_NAME": "vinod",
"LAST_NAME": "nai",
"EMAIL": "vinto.nani@example.com",
"UPDATED_BY": 5678,
"UPDATED_DATE": "2018-01-12 20:38:50.191"
},
]
ng 重复代码打印上述数据,如下所示。
EMAIL
EMPLOYEE_NUMBER
FIRST_NAME
LAST_NAME
UPDATED_DATE
UPDATED_BY
Ram.Rakul@example.com
1234
Ram
Rakul
2018-01-23 17:25:42.635
5678
但我需要它下面的表格格式:
EMPLOYEE_NUMBER FIRST_NAME LAST_NAME EMAIL UPDATED_BY UPDATED_DATE
1234 Ram Rakul Ram.Rakul@example.com 5678 2018-01-23.
解决方案
您必须thead > th
为表头重复元素,而不是thead > tr
。tbody > td
也不要重复tbody > tr
行。
<div ng-show="isResult" style="color: green;">
<table class="tble">
<thead>
<tr align="center" style="background: #7e7e7e; color: #FFFFFF; font-size: small;">
<th ng-repeat="(key, value) in toolDTO[0]"><b>{{key}}</b></th>
</tr>
</thead>
<tbody ng-repeat="tool in toolDTO">
<tr style="font-size: small;">
<td ng-repeat="(key, value) in tool">{{value}}</td>
</tr>
</tbody>
</table>
</div>
推荐阅读
- javascript - 如何将选定的值存储在反应组合框中
- python-3.x - 如何从字典列表中检索键的值?
- shell - 如何返回一个文件夹并在docker中运行
- python - pandas 支持哪些绘图后端支持 DataFrame?
- jupyter-notebook - 如何在 RHEL5 云机中使用 Jupyter Notebook
- python - 如何使 Python 脚本在计算机系统处于睡眠模式时连续运行?(苹果系统)
- java - 如何将数组添加到 firebase 数据库中的项目?
- wpf - 在 XAML 中创建列表时创建列表的控件成员
- python - 重试 REST 调用时出现 5XX 错误 - POST 方法
- java - 如何连接到local.settings.json的JDBC连接字符串?