Conditional coloring

Apps & Services HABPanel
1

Hello Guys, this HABPanel script doesnt want to work. The goal would be to make ‘open’ red and ‘closed’ green.
But all items are green. Any idea where the issue is?

  <tr ng-repeat="item in itemsInGroup('Windows')">
    <td class="text-left">{{item.label}}</td>
    <td class="text-right" ng-style="{color: (item.state=='open')?'red':'green'}">
      {{item.state}}
    </td>
  </tr>
2

Was there ever an answer for this? This is exactly what I am looking to do.

Thanks,

Squid

3

Yes. Case sensitive. Try with “OPEN”.

4

Thanks for the assistance…worked perfectly.

5

Well, I spoke too soon!

It changed the color…but it did not change based on state…

Here’s my code…any suggestions?

<div ng-init="ServerPath='/static/'">
</div>
<style>

.icon {
  height: 100px;
  }
  
.gstatus {
  font-size: 30px;
  }
  
.thermocolor {
  fill: orange;
  height: 35px;
  }

</style>

<h4>Right Garage Door</h4>
<h2 class=gstatus ng-style="{color: (RtGarageDrSensor.state=='OPEN')?'red':'#00FF00'}"> <img class=icon src={{ServerPath}}hab_icons/garage.svg>{{itemValue('RtGarageDrSensor')}} </h2>

I’ve tried many different case versions of the word OPEN (Open, open) with no luck.

6

Any Angular folks care to offer a suggestion???

7 
<h2 class="gstatus" ng-style="{color: (itemState('RtGarageDrSensor')=='OPEN')?'red':'#00FF00'}"> <img class=icon src={{ServerPath}}hab_icons/garage.svg>{{itemState('RtGarageDrSensor')}} </h2>
1 Like
8

Thank you very much!!! - works like a champ!