Angularjs allows you to repeat a specific number of elements based on a given number

Question

I am working with an object that is connected to the $scope in my Angularjs application

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

I want to display the value of the rating by showing a certain number of icon elements on the DOM equal to that value

For example, if the object above has a rating of 4, I would like to repeat the following element 4 times in the DOM:

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

Is there a simple way to achieve this using an Angularjs expression?

Answer 1

Answer №1

Currently, the ng-repeat directive only accepts a collection as input. However, there is a workaround:

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

In your controller, include the following code:

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

By using this method, you can easily modify the value of $scope.number and maintain the desired binding.

Check out this JSFiddle link for examples of lists created with the same getNumber function.

Answer 2

Currently, the ng-repeat directive only accepts a collection as input. However, there is a workaround:

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

In your controller, include the following code:

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

By using this method, you can easily modify the value of $scope.number and maintain the desired binding.

Check out this JSFiddle link for examples of lists created with the same getNumber function.