Although your question falls under the category of an AngularJs query, I have a unique suggestion to achieve the desired effect using a combination of Angular Js and a touch of Css magic.
My approach would involve utilizing two 5-star images - one 'Empty' or gray, and one 'Full' or yellow:
Next, I would create a div containing the gray stars, along with an overlay div housing the bright yellow stars. By using the background-image property instead of traditional <img> tags, I could easily adjust the width of the overlay div to reflect the desired rating level.
Feel free to test this out on this quick fiddle (please excuse the low-quality images, they were sourced quickly for demonstration purposes - experiment with adjusting the width in the full-star div to see the effect).
To begin, structure the Html as follows:
<div class="star-rating">
<!-- The '|| 0' prevents Rating property from being undefined or null -->
<div class="full-star" style="width: {{Item.ItemDetails.Rating * 20 || 0}}%"></div>
<div class="empty-star"> </div>
</div>
The width set on the full-star will determine the visibility of the star.
Accompanied by the following Css:
/* Instead of using <img> tags, utilize background-image for half-star results */
.star-rating {
position: relative;
/* Add any other preferred styles here */
}
.full-star {
position: absolute;
z-index: 1;
height: 100%;
background-image: url('PATH_TO ~/Images/star.png');
/* Add any other preferred styles here */
}
.empty-star {
width: 100%;
height: 100%;
background-image: url('PATH_TO ~/Images/star_gray.png');
/* Add any other preferred styles here */
}
Cheers!