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.