1

I know I can use ng-repeat to iterate over collections. How do I iterate over a range. For example, something like:

<div class='aoeu' ng-repeat='count in range(1,5)'>
  <div id='{{count}}'></div>
</div>
Noel Yap
  • 18,822
  • 21
  • 92
  • 144

2 Answers2

6

There is no range() function in Javascript, but you can create a function that returns an array of values that suits your needs, or use a JS library for that effect. I would use underscore.js, very simply:

<div class='aoeu' ng-repeat='count in _.range(1,5)'>
  <div id='{{count}}'></div>
</div>

Of course, for you to be able to use underscore in your angular app (in directives, and such), you need to include it in your scopes. Include underscore.js in your project, and in your main controller do $rootScope._ = _

This way, any controller or directive in angular recognizes a $scope._ (that references the underscore library), and the above snippet will work! (if all you will ever need is to create arbitrary ranges, you can make the range function yourself - and by 'make' I mean copying any of the million available examples available.. Here's one)

Tiago Roldão
  • 10,629
  • 3
  • 29
  • 28
3

Underscore seems to be the most expressive, but you might want to look at this answer: AngularJS ng-options create range

It uses a filter to create an array. Here's my version

var App = angular.module('app', []);
App.filter('range', function() {
  return function(arr, lower, upper) {
    for (var i = lower; i <= upper; i++){
      arr.push(i);
    }
    return arr;
  };
});​

Which you would use like:

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

And the JSFiddle http://jsfiddle.net/jaimem/hKvNc/4/

pd: if you prefer parseInt to converting strings to integers don't forget to pass the radix. In the answer I linked is missing when parsing min and max.

Community
  • 1
  • 1
jaime
  • 41,961
  • 10
  • 82
  • 52
  • Good answer... however, aren't most range functions inclusive of their upper bounds? Probably should use a `<=` Also, you have some superfluous `+` signs in your `for`. – Ben Lesh Dec 03 '12 at 17:40
  • the `+` operator was coercing string into integers, but it seems is unnecessary as the values are already integers. – jaime Dec 03 '12 at 17:51
  • I figured that after I thought about it. Then I realized "Wait, why would anyone enter `range:5:10abc`? – Ben Lesh Dec 03 '12 at 18:00