ng-repeat不以表格格式显示数据

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>

toolDTO结构:

 [
        {
            "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>

以上是关于ng-repeat不以表格格式显示数据的主要内容,如果未能解决你的问题,请参考以下文章

ng-repeat 中的 select2 不起作用。看片段

angularJs ng-repeat并显示表格上方的错误

使用 ng-repeat 将鼠标悬停在表格中的文本上时显示图像

如何根据“ng-repeat”计数分配“ng-style”指令值

使用字符串(不是HTML)以表格格式显示对象数组。

使用 ng-repeat 将静态表更改为动态表