Ramanaa Gj Ramanaa Gj - 18 days ago 8
Javascript Question

Star Rating: ng-repeat a div or span according to the json value 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

Answer

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