An Alternative Method to ng-repeat: Iterating a Defined Number of Times

In AngularJS, the ng-repeat directive allows us to iterate over an array of elements. However, in certain scenarios, we may desire to repeat a specific template multiple times even in the absence of an array. This article addresses this need.

Solution

AngularJS prior to version 1.3.0 did not support direct iteration over a specified number of times. The workaround involved introducing a custom function and manipulating arrays.

Here's the modified ng-repeat syntax:

    {{ $index 1 }}

In your controller, define the getNumber function:

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

This function returns an array of a specified length, simulating the behavior of iterating over an array.

Update for AngularJS >= 1.3.0

Newer versions of AngularJS offer a simplified solution:

    {{ $index 1 }}

This variation removes the need for a custom function.

Conclusion

Both methods provide a flexible and efficient way to iterate a defined number of times in AngularJS, enabling developers to create dynamic and adaptable user interfaces.