AngularJS ng-options create range

Question

I am trying to create a select element that has a list of numbers 1 to pages where pages is a variable that is the number of pages I have. What i don\'t know how to do is to

Answer 1

Please add ng-model, like below

<select ng-model="test" ng-options="n for n in [] | range:1:30"></select>

After this your example will work in jsfiddle

Answer 2

Your way works fine. Another option that came to my head is to use a filter, so you don't have to pollute your controller with Range.

JS:

var myApp = angular.module('myApp', []);
myApp.filter('range', function() {
  return function(input, min, max) {
    min = parseInt(min); //Make string input int
    max = parseInt(max);
    for (var i=min; i<max; i++)
      input.push(i);
    return input;
  };
});

HTML:

<select ng-model="page" ng-options="n for n in [] | range:1:30"></select>

Example: http://jsfiddle.net/N3ZVp/1/

P.S. in your example in your main post, you didn't put var in front of i. So i is declared as a global variable in your example.

Answer 3

Another solution to keep it all in your template:

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

Answer 4

another approach without a for loop is this:

controller:

 $scope.arr = [];
 $scope.arr.length = count;

view binding:

 ng-options="arr.indexof(i) for i in arr"

Answer 5

Andy's solution is great, however the range cannot go backwards. Here's the improved version:

/* 
 * Creates a range
 * Usage example: <option ng-repeat="y in [] | range:1998:1900">{{y}}</option>
 */
myApp.filter('range', function() {
  return function(input, start, end) {    
    start = parseInt(start);
    end = parseInt(end);
    var direction = (start <= end) ? 1 : -1;
    while (start != end) {
        input.push(start);
        start += direction;
    }
    return input;
  };
});

Answer 6

Piggybacking on martynas' answer. I modified it to include the last value in the range:

/*
 * Creates a range
 * Usage example: <option ng-repeat="y in [] | range:1998:1900">{{y}}</option>
 */

.filter('range', function () {
    return function (input, start, end) {
        var direction;

        start = parseInt(start);
        end = parseInt(end);

        if (start === end) { return [start]; }

        direction = (start <= end) ? 1 : -1;

        while (start != end) {
            input.push(start);

            if (direction < 0 && start === end + 1) {
                input.push(end);
            }

            if (direction > 0 && start === end - 1) {
                input.push(end);
            }

            start += direction;
        }

        return input;
    };
});