Ramanaa Gj Ramanaa Gj - 1 year ago 145
Javascript Question

CSS Star Rating with ng-repeat and json data using angularjs

Want to show a

n times according to the value which was received from JSON.

My object:

$scope.pro = [
product: "chicken",
rating: 3
product: "fish",
rating: 3
product: "pizza",
rating: 4

If a product has 3 ratings means the
have to show three times, like a star rating.

How to do it in angular.js?

My Plunker Demo

Answer Source

Can you try this,


$scope.pro = [{product: "chicken", rating: 3},{product: "fish", rating: 3},{product: "pizza", rating: 4}];

var ratingTotal = 5; 

$scope.getRepeater = function() {
   return new Array(ratingTotal);


<!DOCTYPE html>
<html ng-app="myApp">

    <script data-require="angular.js@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>

  <body ng-controller="myController">

    <div ng-repeat="array in pro">{{array.product}} <span class="star-icon" ng-repeat="r in getRepeater() track by $index" ng-class="{'full': ($index + 1) <= array.rating, 'half': ($index + .5) == array.rating}" ></span></div>



Note: The class name for selected star is mentioned as 'full' and feel free to change this.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download