2017-08-08, 12:02 AM
Here is an example. This is quick and dirty but you will get the basic idea. I guess there is a better way using pure angularjs but I haven't used it yet.
In the flow every second a random number between 1 and 9 is created. Values <=3 are colored green, values >3 and <7 are yellow and values >=7 are red.
In the flow every second a random number between 1 and 9 is created. Values <=3 are colored green, values >3 and <7 are yellow and values >=7 are red.
Code:
[{"id":"cb5ac30.9af85c","type":"inject","z":"bd3199c3.5714e8","name":"","topic":"","payload":"true","payloadType":"bool","repeat":"1","crontab":"","once":true,"x":83,"y":162,"wires":[["40aba4b2.11e704"]]},{"id":"40aba4b2.11e704","type":"function","z":"bd3199c3.5714e8","name":"random","func":"msg.rand = 1+Math.floor(Math.random() * 9);\nreturn msg;","outputs":1,"noerr":0,"x":274,"y":160,"wires":[["9bdb1d37.39052"]]},{"id":"9bdb1d37.39052","type":"ui_template","z":"bd3199c3.5714e8","group":"f599153a.42a9f8","name":"","order":0,"width":0,"height":0,"format":"<div id = \"testId\" ng-bind-html=\"msg.rand\">\n</div>\n<script>\n (function(scope) {\n scope.$watch('msg.rand', function(data) {\n if(data > 3 && data < 7){\n document.getElementById('testId').style.color = \"yellow\";\n }\n if(data < 4){\n document.getElementById('testId').style.color = \"green\";\n }\n if(data > 6){\n document.getElementById('testId').style.color = \"red\";\n }\n });\n })(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":485,"y":164,"wires":[[]]},{"id":"f599153a.42a9f8","type":"ui_group","z":"","name":"Default","tab":"2a75465.6ca1e3a","disp":true,"width":"6"},{"id":"2a75465.6ca1e3a","type":"ui_tab","z":"","name":"Home","icon":"dashboard"}]