Show Rating With Star Using AngularJS

This blog will explain showing rating with stars by using AngularJS.

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>
                       <span class="body-font-style"><i class="fa fa-inr"></i> {{nitroItem.price}}</span> <span class="pull-right">
                           | {{homeController.getRating(itemrating)}}
                           <i class="fa fa-star" style="color:#FF4500;" ng-repeat="t in homeController.getYellowStars(item.rating)"></i>fp;           <i class="fa fa-star" style="color:#878685;" ng-repeat="t in homeController.getGreyStars(item.rating)"></i>
                       </span>
                   </div>

Output



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

<i class="fa fa-star" style="color:#FF4500;" ng-repeat="t in homeController.getYellowStars(nitroItem.rating)"></i>
<i class="fa fa-star" style="color:#878685;" ng-repeat="t in homeController.getGreyStars(nitroItem.rating)"></i>

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.