Clasificación por estrellas CSS con datos ng-repeat y json usando angularjs

Quiere mostrar un div n veces de acuerdo con el valor que se recibió de JSON.

Mi objective:

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

Si un producto tiene 3 calificaciones, significa que el div debe mostrarse tres veces, como una calificación de estrellas.
¿Cómo hacerlo en angular.js?

Mi demostración Plunker

Puedes probar esto,

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="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> </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> 

Nota : El nombre de la class de la estrella seleccionada se menciona como 'completo' y puede cambiarlo.

geNumber() creará una matriz vacía con el tamaño de la calificación. ng-repeat iterará sobre él sin importar lo que esté dentro

En este caso, es necesario track by $index porque mostrará varias veces el mismo valor y los duplicates en un repetidor no están permitidos.

 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> 

Puede crear una matriz, basada en la calificación. Luego repite sobre esa matriz:

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

En tu controller:

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

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

Si te apetece, puedes usar esta solución ES6 para mostrar x número de * :
Nota: ningún soporte de IE en absoluto.

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

Información sobre las funciones de ES6:
Array.from (sin soporte en IE) crea una matriz a partir de una cadena, cada carácter se convierte en un elemento de la matriz.
String.prototype.repeat (sin soporte en IE y Opera) … repite la cadena X veces.

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

// El código va aquí

 // 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="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> </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> 

Una ratings directivas AngularJS:

 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="angular.js@1.3.15" 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> 

Una mejor forma de hacerlo es crear un componente estrella a través de una directiva personalizada, que también puede reutilizarse en toda la aplicación angular, esta directiva toma la sorting y genera el número de estrellas en el 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>