Динамически создавать строки таблицы HTML из объекта, используя угловой ng-repeat - PullRequest
Новая
       11

Динамически создавать строки таблицы HTML из объекта, используя угловой ng-repeat

0 голосов
/ 26 октября 2019

FWIW угловой код HTML используется в Node-RED в узле «шаблона».

У меня есть объект, состоящий из печатных плат, идентифицированных по серийным номерам. Каждая печатная плата имеет два канала, каждый из которых имеет свои собственные выходы.

Эти номера могут измениться, хотя, например, в некоторых печатных платах в будущем будет больше каналов, или я добавлю еще одну печатную плату в систему. Поэтому мне нужно, чтобы таблица создавалась, предположительно, с использованием вложенных циклов для обхода объекта сообщения и извлечения любой информации, существующей в данный момент.

Я успешно использовал ng-repeat для создания отдельных таблиц для каждой печатной платы с помощью ngповторяя по каналам каждой доски. Но я бы предпочел, чтобы у меня была одна главная таблица каждой печатной платы с каждым каналом, чтобы я мог сортировать эту таблицу, например, по состоянию заданного значения.

Вот мой объект: 

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

Я хочу, чтобы таблица выглядела так:

enter image description here

Пока мой код дает мне только заголовок. Заранее спасибо за помощь!

1 Ответ

0 голосов
/ 26 октября 2019

Используйте форму (key, value) директивы ng-repeat: 

<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>

Для получения дополнительной информации см.

...