有条件地在 HTML 表中插入一行（Angular）答案

【问题标题】：Conditionally insert a row in HTML table (Angular)有条件地在 HTML 表中插入一行（Angular）
【发布时间】：2020-12-21 22:58:46
【问题描述】：

问题

如何使用 Angular 有条件地在 HTML 表格中插入一行？

关于问题的更多细节

我正在使用 Node-RED 中的 Angular，这是我的表，它遍历对象中的每个键/值：

<table>
    <tr>
        <td>ID</td>
        <td>State</td>
        <td>Data</td>
    </tr>
    <tr ng-repeat="(key, value) in msg.shellies">
        <td>{{key}}</td>
        <td>{{value.up_since_time}} {{value.up_since_date}})</td>
        <td>{{value.data}}</td>
    </tr>
</table>

我知道如何有条件地添加任何元素，例如<span> 像这样：

<span ng-if="value.state === 'up'">The device is UP</span>

但显然我不能将表格行包装在 <span> 中（HTML 不会验证），我希望 ng-repeat 应用于表格行。

初步想法

我最初的想法是一定有一些被浏览器忽略的 HTML 元素，我可以将 ng-repeat 应用于该元素，将ng-if 应用于表格行。例如

<magic_invisible_tag ng-repeat="(key, value) in msg.shellies">
    <tr ng-if="value.state === 'up'">
        <td>.....</td>
    </tr>
</magic_invisible_tag>

但这显然不可能在 Stack Overflow 上阅读 various questions。

在 Angular 中是否有其他的表示法适用于此？

【问题讨论】：

标签： html angularjs node-red

【解决方案1】：

已经尝试过了，似乎可以将 ng-if 指令添加到表格行本身。

我猜 Angular 已经完成了这项工作，以某种方式确保 ng-repeat 指令有效，而不管同一元素中的 ng-if 指令如何。

【讨论】：