Show Rating With Star Using AngularJS

Gul Md Ershad
Oct 11, 2016
6.2k
0
4
Blog

Introduction

E-Commerce Websites generally show ratings in the form of stars for each item. They provide maximum ratings up to five stars from one. Start making a very good visual effect in the representation of ratings of any item. It is very easy to show start in Web Applications.

Back-end gives JSON response, which contains Rating data for each item, as given below.

{"items":[{"name":"Tommy Hilfiger backpack","price":"1350","rating":"3.8", {"name":"Redragon 3000DPI Mouse","rating":"4"}]}

Now, write below code into controller to make Stars,

Yellow Star formation

controller.getYellowStars = function (num) {
var numberOfStars = Math.round(num);
if (numberOfStars > 5)
numberOfStars = 5;
var data = new Array(numberOfStars);
for (var i = 0; i < data.length; i++) {
data[i] = i;
}
return data;
}

Grey Star formation

controller.getGreyStars = function (num) {
var numberOfStars = Math.round(num);
var restStars = 5 - numberOfStars;
if (restStars > 0) {
var data = new Array(restStars);
for (var i = 0; i < data.length; i++) {
data[i] = i;
}
return data;
}
}

Now, go to HTML index.html page and add the link, given below for the image of Star.

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">

Now, go to partial page for the display of Stars and do binding, as shown below.

<div>
{{nitroItem.price}}
| {{homeController.getRating(itemrating)}}
fp;
</div>

Output

We got images for the grey and yellow stars with the help of the code, given below.

Conclusion

Thus, font-awesome.min.css provides so many icons and you can show icons like yellow stars, grey stars, based on your AngularJS or JavaScript code calculation.