AngularJS For Loop with Numbers & Ranges

Issue

Angular does provide some support for a for loop using numbers within its HTML directives:

<div data-ng-repeat="i in [1,2,3,4,5]">
  do something
</div>

But if your scope variable includes a range that has a dynamic number then you will need to create an empty array each time.

In the controller

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

In the HTML

<div data-ng-repeat="i in range">
  do something
</div>

This works, but it is unnecessary since we won’t be using the range array at all within the loop. Does anyone know of setting a range or a regular for min/max value?

Something like:

<div data-ng-repeat="i in 1 .. 100">
  do something
</div>

Solution

I tweaked this answer a bit and came up with this fiddle.

Filter defined as:

var myApp = angular.module('myApp', []);
myApp.filter('range', function() {
  return function(input, total) {
    total = parseInt(total);

    for (var i=0; i<total; i++) {
      input.push(i);
    }

    return input;
  };
});

With the repeat used like this:

<div ng-repeat="n in [] | range:100">
  do something
</div>

Answered By – Gloopy

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0