AngularJS ng-options создают диапазон

Я пытаюсь создать элемент select, который имеет список чисел 1 на страницы, где страницы - это переменная, которая представляет собой количество страниц, которые у меня есть. То, что я не знаю, как это сделать, - структурировать выражение ng-options, чтобы оно дало мне нужные мне числа. Вот что я до сих пор

<select ng-model="page" ng-options="???"></select>

что мне нужно, чтобы поместить в выражение ng-options, чтобы он мог создать мой выбор, например

<select>
    <option value="1">1</option>
    ...
    <option value="35">35</option>
</select>

Мне нужно создать функцию, которая возвращает массив чисел и как-то использовать его там или есть более простой способ сделать это?

любая помощь будет принята с благодарностью.

Спасибо

ИЗМЕНИТЬ

После публикации моего вопроса я выяснил один из способов сделать это, создав функцию под названием Range в моем контроллере, которая принимает два числа и возвращает массив со всеми значениями в этом диапазоне.

$scope.Range = function(start, end) {
    var result = [];
    for (var i = start; i <= end; i++) {
        result.push(i);
    }
    return result;
};

то в HTML я сделал

<select ng-name="page" ng-options="page for page in Range(1, pages)"></select>

Это самый простой способ сделать это или есть лучший способ?

Ответы

Ответ 1

Твой путь отлично работает. Еще один вариант, который пришел мне на ум, - использовать фильтр, поэтому вам не нужно загрязнять контроллер с помощью 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>

Пример: http://jsfiddle.net/N3ZVp/1/

P.S. в вашем примере на вашем основном посту, вы не ставили var перед i. Поэтому i объявляется как глобальная переменная в вашем примере.

Ответ 2

Добавьте ng-модель, например ниже

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

После этого ваш пример будет работать в jsfiddle

Ответ 3

другой подход без цикла for:

контроллер:

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

просмотр привязки:

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

Ответ 4

Решение Andy отлично, однако диапазон не может идти назад. Здесь улучшенная версия:

/* 
 * 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;
  };
});

Ответ 5

Еще одно решение сохранить все в вашем шаблоне:

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

Ответ 6

Пиггинг на ответ мартины. Я изменил его, чтобы включить последнее значение в диапазон:

/*
 * 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;
    };
});

Ответ 7

В CoffeeScript:

app.filter 'range', ->
  (input, min, max) ->
    input.push(i) for i in [parseInt(min)..parseInt(max)]

И HTML:

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

Вот gist с Javascript

Ответ 8

Если вы хотите добавить placeholder в select, используйте нижеприведенное решение. Вам нужно сначала определить фильтр как это.

<select>
    <option value="">-- Birth Year --</option>
    <option ng-repeat="n in [] | range:1900:2000">{{n}}</option>
</select>