Iterating Over a Range of Numbers in AngularJS

In AngularJS, iterating over a range of numbers is a common requirement. While the ng-repeat directive provides an easy way to iterate over arrays and objects, it doesn’t directly support iterating over a range of numbers. However, there are several ways to achieve this.

One approach is to create an array of numbers in your controller and then use ng-repeat to iterate over it. For example:

$scope.range = [];
for (var i = 0; i < 10; i++) {
    $scope.range.push(i);
}

Then, in your HTML template:

<div ng-repeat="i in range">
    {{ i }}
</div>

However, this approach can be cumbersome and inflexible.

A better approach is to use a custom filter or function that generates the range of numbers on the fly. One way to do this is by creating a custom filter called "range" that takes an input value (e.g., the number of iterations) and returns an array of numbers from 0 to that value.

myApp.filter('range', function() {
    return function(input, total) {
        total = parseInt(total);
        var result = [];
        for (var i = 0; i < total; i++) {
            result.push(i);
        }
        return result;
    };
});

Then, in your HTML template:

<div ng-repeat="n in [] | range:10">
    {{ n }}
</div>

Another approach is to use a function that generates the range of numbers directly in the controller. For example:

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

Then, in your HTML template:

<ul>
    <li ng-repeat="n in range(5,15)">
        Number {{ n }}
    </li>
</ul>

Finally, if you only need to iterate over a small fixed range of numbers, you can use the $index variable provided by AngularJS. For example:

<div ng-repeat="n in [].constructor(10) track by $index">
    {{ $index }}
</div>

This approach is useful for quick prototyping or when working with small ranges of numbers.

In summary, iterating over a range of numbers in AngularJS can be achieved through various approaches, including creating an array of numbers in the controller, using custom filters or functions, and leveraging the $index variable.