I've been delving into the world of the ionic framework, working on a simple app to showcase some json data. I managed to style text strings in my ionic list with no issues (story.user), but now I want to change the background color based on different value ranges. For example:
"less than 2" "between 2 and 5" "greater than 5" for the "story.val"
However, I'm clueless as to how to approach this. Can anyone provide some guidance?
I couldn't find much documentation on using inline conditional expressions...
Below is the code that successfully deals with strings, HTML, and CSS:
HTML:
<ion-content>
<div class="list">
<div class="item" ng-repeat="story in stories">
{{story.val}} - {{story.place}} - {{story.end}}
<p ng-class="{ 'user1': 'status-okay', 'user2': 'status-medium', 'user3' : 'status-risk'}[story.user]">{{story.user}}</p>
</div>
</div>
</ion-content>
CSS:
.status-okay {
background-color: green;
}
.status-medium {
background-color: yellow;
}
.status-risk {
background-color: red;
}