1

I'm starting to learn AngularJS. I'm experienced with JavaScript/jQuery but I'm having some difficulty right now understanding the basics of AngularJS. I have a quick question for anyone with the slightest bit of experience.

I have a table that will displays "users" (which will come from a GET query).

Each "user in users" will have schema like: {name:'', rating:4, reviews:10}

Rating is an int from 1 to 5, where each represents a star (out of 5 possible stars). For each int in rating I would like to draw an IMG tag that shows a single star.

So I have something like this:

<tbody>
    <tr ng-repeat="user in users">
        <td>{{user.name}}</td>
        <td>
            <img src="star.jpg" ng-repeat="n in 1 .. user.rating">
        </td>
        <td>{{user.reviews}}</td>
    </tr>
</tbody>

Any idea how to setup that loop properly? Obviously that doesn't work. I would like it to use {{user.rating}} to determine how many stars it needs to draw.

Thanks for your assistance.

codemonkey613
  • 960
  • 1
  • 16
  • 26
  • The answer on this question would solve your problem. http://stackoverflow.com/questions/16824853/ng-repeat-defined-number-of-times-instead-of-repeating-over-array – harun Dec 17 '13 at 23:18
  • possible duplicate of [AngularJS For Loop with Numbers & Ranges](http://stackoverflow.com/questions/11873570/angularjs-for-loop-with-numbers-ranges) – Stewie Dec 17 '13 at 23:25
  • @Stewie I took a look at that, but I couldn't figure out how to use it. The filter method seemed much too complex for such a simple scenario as well. – codemonkey613 Dec 18 '13 at 00:09

1 Answers1

2

With ng-repeat, the only way I see is to define a function in the scope, returning an array of n elements:

$scope.stars = function(amount) {
    var result = [];
    for (var i = 0; i < amount; i++) {
         result.push(i);
    }
    return result;
}

And then, in the view, use

ng-repeat="star in stars(user.rating)"

But you could also define your own directive which loops and displays the body of the directive N times.

JB Nizet
  • 678,734
  • 91
  • 1,224
  • 1,255
  • To add to this answer, there are a number of nice examples in the answers of this question: http://stackoverflow.com/questions/11873570/angularjs-for-loop-with-numbers-ranges and over here http://stackoverflow.com/questions/16824853/ng-repeat-defined-number-of-times-instead-of-repeating-over-array – Beyers Dec 17 '13 at 23:12
  • @JB Nizet - thanks, that looks great. That is definitely the simplest way I've seen so far. I like how you're using a function and just passing the value right in as a param. I was trying to do something like that but couldn't figure out how to pass the value from the record to the controller. I didn't know how to access it, so this case looks really easy compared to other solutions (like using a filter). – codemonkey613 Dec 18 '13 at 00:12
  • This has the disadvantage of creating a new array at each digest loop. If you know you have a maximum of 5 stars, you could also have an array of arrays in the scope (the first array containing 0 star, the second one containing 1 star, the third one containing 2 stars, etc.), and use `ng-repeat="star in arrayOfArrays[user.rating]"` – JB Nizet Dec 18 '13 at 06:48