So here I go how I’ve done this in my custom widget:
- First of all getting the value from this item is an numerical and it show with 1 traling digit like 8.0 for a 8 stars ratted media
- Second Number 10 is seen like a 1 so: 10.0 = 1 and 10 from the perspective of angularJS. Not sure how to fix that… but I’v manage some workaround…
Here my html angular code:
<div class="insertStarRating" >
<!-- {{itemValue(config.gmanmedia_cpRating,true) | number:0}} -->
<span ng-style="{color: (itemValue(config.gmanmedia_cpRating) >= 1)?'yellow':'gray'}" >☆</span>
<span ng-style="{color: (itemValue(config.gmanmedia_cpRating) >= 2)?'yellow':'gray'}" >☆</span>
<span ng-style="{color: (itemValue(config.gmanmedia_cpRating) >= 3)?'yellow':'gray'}" >☆</span>
<span ng-style="{color: (itemValue(config.gmanmedia_cpRating) >= 4)?'yellow':'gray'}" >☆</span>
<span ng-style="{color: (itemValue(config.gmanmedia_cpRating) >= 5)?'yellow':'gray'}" >☆</span>
<span ng-style="{color: (itemValue(config.gmanmedia_cpRating) >= 6)?'yellow':'gray'}" >☆</span>
<span ng-style="{color: (itemValue(config.gmanmedia_cpRating) >= 7)?'yellow':'gray'}" >☆</span>
<span ng-style="{color: (itemValue(config.gmanmedia_cpRating) >= 8)?'yellow':'gray'}" >☆</span>
<span ng-style="{color: (itemValue(config.gmanmedia_cpRating) >= 9)?'yellow':'gray'}" >☆</span>
<span ng-style="{color: (itemValue(config.gmanmedia_cpRating) > 9)?'yellow':'gray'}" >☆</span>
</div>
- So what is commented out is my current playing user rating from my Kodi and it can be filtered to show without trailing digit but it’s not the real value returned to be used…
- For 10 star rated media I’ve put >9 for it to be true because >= doesn’t see 10.0 Numerical value
Next step is to make it usable with ng-click for us to be able to rate from my touch panel