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/

P.S。在您的主帖中的示例中，您没有将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

安迪的解决方案很棒，但范围不能倒退。这是改进版本：

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

捎带马丁纳斯＆＃39;回答。我修改它以包括范围中的最后一个值：

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

Answer 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 with the Javascript

Answer 8

如果要在select中添加占位符，请使用下面给出的解决方案。您需要先定义过滤器like this。

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

AngularJS ng-options创造范围

8 个答案: