CODEWITHSUNDEEP
javascriptangularjsjsonangularjs-ng-repeat
User_3535
User_3535

Reputation: 862

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

Want to show a div 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 div have to show three times, like a star rating.
How to do it in angular.js?

My Plunker Demo

Upvotes: 6

Views: 3541

Answers (7)

Aruna
Aruna

Reputation: 12022

Can you try this,

JS

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

var ratingTotal = 5; 

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

Html

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

  <head>
    <script data-require="[email protected]" 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>
  </head>

  <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>

  </body>

</html>

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

Upvotes: 4

Abdul Mateen Mohammed
Abdul Mateen Mohammed

Reputation: 1894

A better way to do this is to create a star component via a custom directive it can also be reused throughout the Angular app, this directive takes the rating and generates the number of stars in the DOM.

angular
  .module('demo', [])
  .controller('DefaultController', DefaultController)
  .controller('StarController', StarController)
  .directive('star', star);

function DefaultController() {
  var vm = this;
  vm.products = [{
    product: "chicken",
    rating: 3
  }, {
    product: "fish",
    rating: 4
  }, {
    product: "pizza",
    rating: 5
  }];
}

function star() {
  var directive = {
    restrict: 'E',
    scope: {
      rating: '=',
      max: '='
    },
    link: linkFunc,
    controller: StarController,
    controllerAs: 'star',
    bindToController: true
  };

  return directive;

  function linkFunc(scope, element, attrs, ngModelCtrl) {
    for (var i = 0; i < scope.max; i++) {
      var fillStyle = '';
      if (i < scope.rating) {
        fillStyle = 'fill';
      } else {
        fillStyle = 'empty';
      }

      element.append('<span class="star-icon ' + fillStyle + '">☆</span>');
    }
  }
}

function StarController() {
  var vm = this;
}
ul {
  font-size: 20px;
  list-style-type: none;
  padding: 0;
}
ul li {
  padding: 10px;
}
ul li > span {
  display: inline-block;
  width: 100px;
}
star span {
  margin: 0px 5px;
}
.star-icon {
  color: #ddd;
  font-size: 1.5em;
  position: relative;
  top: 3px;
}
.star-icon.fill:before {
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.7);
  color: #FDE16D;
  content: '\2605';
  position: absolute;
  left: 0;
}
.star-icon.empty:before {
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.7);
  color: #FFF;
  content: '\2605';
  position: absolute;
  left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo">
  <div ng-controller="DefaultController as ctrl">
    <ul>
      <li ng-repeat="product in ctrl.products">
        <span ng-bind="product.product"></span>
        <star rating="product.rating" max="5"></star>
      </li>
    </ul>
  </div>
</div>

Star rating inspired by https://coderwall.com/p/iml9ka/star-ratings-in-css-utf8

Upvotes: 1

Yosvel Quintero
Yosvel Quintero

Reputation: 19070

An AngularJS directive ratings:

angular
    .module('myApp', [])
    .directive('ratings', function () {
        return {
            restrict: 'E',
            scope: false,
            template: '<span ng-repeat="x in arrRating track by $index">&#9733;</span>',
            link: function ($scope, $el, $attr) {
                $scope.arrRating = new Array(+$attr.rating);
            }
        };
    })
    .controller('myController', function ($scope) {
        $scope.pro = [{product: "chicken",rating: 3}, {product: "fish",rating: 3}, {product: "pizza",rating: 4}, {product: "steak",rating: 10}];
    });
<script data-require="[email protected]" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>

<div ng-app="myApp" ng-controller="myController">
  <div ng-repeat="p in pro">
     {{p.product}} <ratings rating="{{p.rating}}"></ratings>
  </div>
</div>

Upvotes: 1

Naveen Kumar
Naveen Kumar

Reputation: 50

<div ng-repeat="array in pro">{{array.product}} ,
  <span ng-repeat=" arr in array.rating ">{{arr.j}}</span>
</div>

// Code goes here

// Code goes here

var app = angular.module('myApp', []);

app.controller('myController', function($scope) {
  $scope.pro = [{product: "chicken", rating: 3},{product: "fish", rating: 4},{product: "pizza", rating: 6}];
  for(var i=0;i<$scope.pro.length;i++)
  {
     if($scope.pro[i].rating >0)
     {
         $scope[$scope.pro[i].product]=[];
         for(var j=0;j< $scope.pro[i].rating;j++)
         {
            $scope[$scope.pro[i].product].push({j:'*'}); 
         }
         $scope.pro[i].rating = $scope[$scope.pro[i].product];
     }
  }
});
<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <script data-require="[email protected]" 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>
  </head>

  <body ng-controller="myController">

    <div ng-repeat="array in pro">{{array.product}} ,
      <span ng-repeat=" arr in array.rating ">{{arr.j}}</span>
    </div>
    
  </body>

</html>

Upvotes: 1

devqon
devqon

Reputation: 13997

You can create an array, based on the rating. Then repeat over that array:

<div ng-repeat="array in pro">
    {{array.product}} , <span ng-repeat="n in createArray(array.rating) track by $index">X</span>
</div>

In your controller:

$scope.createArray = function(n){    
    return new Array(n);
}

https://plnkr.co/edit/gUPn6m7Tiu01yksa9VOs?p=preview

Upvotes: 3

George Kagan
George Kagan

Reputation: 6124

If you're feeling fancy, you can use this ES6 solution to show x number of *:
Note: no IE support at all.

JS 

$scope.getAsterisks = rating => Array.from('*'.repeat(parseInt(rating, 10)));

HTML 

<span ng-repeat="x in getAsterisks(array.rating) track by $index">{{x}}</span>

Plunker: https://plnkr.co/edit/9H3j3NH9w5xNvqM142Gq?p=preview

Info on the ES6 functions:
Array.from (no support in IE) creates an array from a string, each character becomes an array item.
String.prototype.repeat (no support in IE and Opera) ... repeats the string X times.

Upvotes: 1

Weedoze
Weedoze

Reputation: 13953

geNumber() will create an empty array with the size of the rating. ng-repeat will iterate over it no matter what is inside

track by $index is necessary in this case because you will display multiple times the same value and duplicates in a repeater are not allowed 

var app = angular.module('myApp', []);

app.controller('myController', function($scope) {
  $scope.pro = [{
    product: "chicken",
    rating: 3
  }, {
    product: "fish",
    rating: 3
  }, {
    product: "pizza",
    rating: 4
  }];
  
  $scope.getNumber = function(num){
    return new Array(num);
  }  
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="myApp" ng-controller="myController">

  <div ng-repeat="item in pro">
    <div ng-repeat="n in getNumber(item.rating) track by $index">
      {{item.product}}
    </div>
  </div>

</body>

Upvotes: 3

Related Questions