looping through a variable length with Angularjs templates?

Question

The car.images_length variable has a number say for example "4". So i want to iterate and create 4 <li> elements, depending on the variable.

I know that car.images_length has a value because I logged using javascript.

This is a very newbie question, but Im new to Angularjs.

Im trying to attempt it, but didn't have any luck, heres my code:

The HTML

 <ul rn-carousel rn-carousel-buffered class="image" ng-repeat="pics in car.images_length">
        <li><img src="images/cars/{{$index}}.jpg"></li>
 </ul>

Answer 1

You want to iterate over the li elements, not over the ul

<ul rn-carousel rn-carousel-buffered class="image" >
     <li ng-repeat="number in range(0, car.images_length)"><img src="images/cars/{{number}}.jpg"></li>
</ul>

ng-repeat accepts an array not a value. So you have to create an array, in the above sample I did that by creating a range from 0 to the length

In your controller you will have to create the range function:

$scope.range = function(min, max){
    var result = [];
    for (var i = min; i <= max; i++) result.push(i);
    return result;
};

Fiddle