AngularJS ng-options创造范围

Question

我正在尝试创建一个select元素,其中包含数字1到页面的列表,其中pages是一个变量,它是我拥有的页数.我不知道怎么做是构造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> 

这是最简单的方法吗？还是有更好的方法？

Answer 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/

PS在你的主帖中你的例子,你没有放在var前面i.因此i在您的示例中声明为全局变量.

Answer 2

另一种解决方案是将它全部保存在模板中:

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

Answer 3

请添加ng-model,如下所示

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

在此之后,您的示例将在jsfiddle中工作

Answer 4

没有for循环的另一种方法是这样的:

控制器:

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

视图绑定:

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

Answer 5

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

Answer 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;
    };
});