Show Rating With Star 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.
  1. {"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 
  1. controller.getYellowStars = function (num) {  
  2.         var numberOfStars = Math.round(num);  
  3.         if (numberOfStars > 5)  
  4.             numberOfStars = 5;  
  5.         var data = new Array(numberOfStars);  
  6.         for (var i = 0; i < data.length; i++) {  
  7.             data[i] = i;  
  8.         }  
  9.         return data;  
  10.     }  
Grey Star formation
  1. controller.getGreyStars = function (num) {  
  2.     var numberOfStars = Math.round(num);  
  3.     var restStars = 5 - numberOfStars;  
  4.     if (restStars > 0) {  
  5.         var data = new Array(restStars);  
  6.         for (var i = 0; i < data.length; i++) {  
  7.             data[i] = i;  
  8.         }  
  9.         return data;  
  10.     }  
  11. }  
Now, go to HTML index.html page and add the link, given below for the image of Star.
  1. <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.
  1. <div>  
  2.                        <span class="body-font-style"><i class="fa fa-inr"></i> {{nitroItem.price}}</span> <span class="pull-right">  
  3.                            | {{homeController.getRating(itemrating)}}  
  4.                            <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>  
  5.                        </span>  
  6.                    </div>  
Output



We got images for the grey and yellow stars with the help of the code, given below.
  1. <i class="fa fa-star" style="color:#FF4500;" ng-repeat="t in homeController.getYellowStars(nitroItem.rating)"></i>  
  2. <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.
Ebook Download
View all
Learn
View all