Repeat a Number of Elements Given a Number in Angularjs

Question

I have the following object binded to the $scope of my Angularjs application

{name: 'Vampire Cafe', rating: 4, review: "Food was good, cafe was a bit dark..."}

I'd like to take the value of the rating and repeat a number of icon elements on my DOM totaling that value

So given the object above, the element would repeat 4 times, and the DOM would look like so:

<h3>Rating</h3>
<i class="icon-ios-star"></i>
<i class="icon-ios-star"></i>
<i class="icon-ios-star"></i>
<i class="icon-ios-star"></i>

How can I do this with a simple Angularjs expression?

jitender · Accepted Answer · 2017-03-21 02:37:58Z

3

At the moment, ng-repeat only accepts a collection as a parameter, but you could do this:

<ul>
    <li ng-repeat="i in getNumber(number) track by $index"><span>{{$index+1}}</span></li>
</ul>

And somewhere in your controller:

$scope.number = 5;
$scope.getNumber = function(num) {
    return new Array(num);   
}

This would allow you to change $scope.number to any number as you please and still maintain the binding you're looking for.

Here is a fiddle with a couple of lists using the same getNumber function.

answered Mar 21, 2017 at 2:30

jitender

10.4k1 gold badge22 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Very clean solution!