通过动态值更改CSS

Question

如果超出了动态值，谁可以更改表中列的背景颜色。

值由Nodered更新。 但是我找不到适合它的javascript方法。

<table>
  <tr>
    <th class="header" colspan="2">HEADER</th>
  </tr>
  <tr>
    <td class="column">{{msg.payload}}</td>
  </tr>
</table>

<script>

    $(".column").change(function(){
        if ({{msg.payload}} >= 6) {
             $(this).css("background-color", "#D6D6FF");
        } else {
            $(this).css("background-color", "#D6D600");
        }
    });

</script>

节点红色流：

[{"id":"f98663ed.8064d","type":"ui_template","z":"475761f8.ba0f9","group":"c3b3b73d.7f9448","name":"","order":0,"width":"6","height":"6","format":"<style>\n    {{msg.style}}\n</style>\n\n<table>\n  <tr>\n    <th class=\"header\" colspan=\"2\">HEADER</th>\n  </tr>\n  \n  <tr>\n    <td class=\"column\">{{msg.payload}}</td>\n  </tr>\n  \n</table>\n\n<script>\n\n    $(\".column\").change(function(){\n        if ({{msg.payload}} >= 6) {\n             $(this).css(\"background-color\", \"#D6D6FF\");\n        } else {\n            $(this).css(\"background-color\", \"#D6D600\");\n        }\n    });\n\n</script>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":1280,"y":300,"wires":[[]]},{"id":"9ef07a1f.b3ce98","type":"template","z":"475761f8.ba0f9","name":"css","field":"style","fieldType":"msg","format":"css","syntax":"mustache","template":"table  {\n    border: 0px;\n}\n\nth, td {\n    border: 1px solid black;\n    padding: 5px;\n}\n\n.header {\n    background-color: #333;\n    text-align: left;\n    color: white;\n}\n\n\n.column {\n    background-color: #BBB;\n    text-align: center;\n}\n\n\n","output":"str","x":1107.5,"y":300,"wires":[["f98663ed.8064d"]]},{"id":"2ca2f8e8.c43b38","type":"inject","z":"475761f8.ba0f9","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":true,"onceDelay":0.1,"x":770,"y":300,"wires":[["4288f575.a1c85c"]]},{"id":"4288f575.a1c85c","type":"random","z":"475761f8.ba0f9","name":"","low":"1","high":"10","inte":"true","property":"payload","x":959,"y":301,"wires":[["9ef07a1f.b3ce98"]]},{"id":"c3b3b73d.7f9448","type":"ui_group","z":"","name":"Teste","tab":"22ee7364.ee20bc","disp":false,"width":"6","collapse":false},{"id":"22ee7364.ee20bc","type":"ui_tab","z":"","name":"LAB","icon":"dashboard"}]

Answer 1

您的{{msg.payload}}不在<script></script>

Answer 2

谢谢。 这是一个很好的提示。 ich找到了这个解决方案。

<table>
  <tr>
    <th class="header" colspan="2">HEADER</th>
  </tr>
  <tr>
    <td class="column" ng-style="{backgroundColor: (msg.payload <= 6) ? 'green' : 'red'}">{{msg.payload}}</td>
  </tr>
</table>