使用角度 ng-repeat 从对象动态创建 HTML 表格行答案

【问题标题】：Dynamically create HTML table rows from object using angular ng-repeat使用角度 ng-repeat 从对象动态创建 HTML 表格行
【发布时间】：2019-10-26 17:06:17
【问题描述】：

FWIW HTML 角度代码正在 Node-RED 中的“模板”节点中使用。

我有一个由序列号标识的电路板组成的对象。每个电路板都有两个通道，每个通道都有自己的输出。

这些数字可能会发生变化，例如，将来某些电路板将有更多通道，或者我将在系统中添加另一个电路板。所以我需要大概使用嵌套循环来创建表来遍历消息对象并提取当时存在的任何信息。

我成功地使用 ng-repeat 通过对每个电路板的通道进行 ng-repeat 来为每个电路板构建单独的表。但我更喜欢每个通道的每个电路板都有一个主表，这样我就可以根据设定值的状态对该表进行排序。

这是我的对象：

{ "serialNum": {
    "1a": {
            "channel": {
                "0": {
                    "status": "running",
                    "value" : 100.0,
                    "setpoint": 200.0
                },
                "1": {
                    "status": "running",
                    "value" : 100.1,
                    "setpoint": 200.1
                }
            }
        },
    "2a": {
            "channel": {
                "0": {
                    "status": "running",
                    "value" : 200.0,
                    "setpoint": 300.0
                },
                "1": {
                    "status": "running",
                    "value" : 200.1,
                    "setpoint": 300.1
                }
            }
        },
    "3a": {
            "channel": {
                "0": {
                    "status": "stopped",
                    "value" : 300.0,
                    "setpoint": 400.0
                },
                "1": {
                    "status": "stopped",
                    "value" : 300.1,
                    "setpoint": 400.1
                }
            }
        }
    }
}

这是我目前正在尝试的代码（我猜我在这里做错了很多事情......）：

<!DOCTYPE html>
<html>

<style>
table, th , td  {
  border: 1px solid grey;
  border-collapse: collapse;
  padding: 5px;
}
table tr:nth-child(odd) {
  background-color: #f1f1f1;
}
table tr:nth-child(even) {
  background-color: #ffffff;
}
</style>

<table id="board status" border="1" width = 1000px height = 400px>
    <thead>
    <tr>
        <th>Serial #</th>
        <th>Channel #</th>
        <th>Status</th>
        <th>Value</th>
        <th>Setpoint</th>
    </tr>
    </thead>

    <tbody ng-repeat="serial in msg.boardMsg.serialNum">
        <tr ng-repeat="channelNum in msg.boardMsg.serialNum[serial].channel">
            <td> {{serial}} </td>
            <td>{{channelNum}}</td>
            <td ng-style = "{color : msg.boardMsg.serialNum[serial].channel[channelNum].status === 'stopped' ? 'red' : 'green'}">
              {{msg.boardMsg.serialNum[serial].channel[channelNum].status == "stopped" ? "stopped" : "running"}}
            </td>  
            <td>{{msg.boardMsg.serialNum[serial].channel[channelNum].value</td>
            <td>{{msg.boardMsg.serialNum[serial].channel[channelNum].setpoint</td>
        </tr>
    </tbody>
</table>

我希望表格如下所示：

到目前为止，我的代码只给了我标题。提前感谢您的帮助！

【问题讨论】：

标签： html angularjs object node-red

【解决方案1】：

使用ng-repeat 指令的(key, value) 形式：

<tbody ng-repeat="(serialNum, serialVal) in msg.boardMsg.serialNum">
    <tr ng-repeat="(channelNum, channelVal) in serialVal.channel">
        <td> {{serialNum}} </td>
        <td>{{channelNum}}</td>
        <td ng-style = "{color : channelVal.status === 'stopped' ? 'red' : 'green'}">
          {{channelVal.status == "stopped" ? "stopped" : "running"}}
        </td>  
        <td>{{channelVal.value}}</td>
        <td>{{channelVal.setpoint}}</td>
    </tr>
</tbody>

有关详细信息，请参阅

AngularJS ng-repeat Directive API Reference - Iterating Over Object Properties

【讨论】：

谢谢，这绝对有效！然而，一个问题是<tbody ng-repeat 实际上产生了 3 个主体，这基本上破坏了对表格进行排序的能力。我尝试通过仅使用<tbody ng-repeat-start 并以<\tbody ng-repeat-end 结尾来解决此问题，但似乎我无法访问键值对。你对如何只生产一个身体有什么建议吗？