Forum | Appery.io

Hi
I am displaying a list of items that contains name and temperature in seperate labels on a list item. If the temperature value is below a certain value, I would like to change the color of the temperature label of the specific item. How would I do that.

Thank you.

Hello Deon,

Could you please clarify, what project type do you use there? JQM or Ionic?

We suggest you to change the color with custom CSS classes, like "below" and "above"
For the JQM app, please add these classes in the mapping, using JS code.
Add the mapping arrow from $ component to that label:
pre
$(element).addClass(value.myValue 100 ? "above" : "below");
/pre
here "myValue" - the name of item's property you need to check the value.

Thank you for your reply Serhii
It is JQM.

However, it does get a bit more complicated than that an my apologies for not explaining the complexity in the first instance.

I have two temperature thresholds a minimum and maximum threshold.
Lets assume Temp is 150
If the Temp goes below 100 then Color must be "below" OR if the Temp exceeds 200 then the color must be "above".

Would something like this work

$(element).addClass(value.myValue < 100 ? "below");
$(element).addClass(value.myValue 200 ? "above");

So if neither condition exists, the color will remain as is.

Thank you