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

将其全部保存在模板中的另一种解决方案：

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

Answer 2

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

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

Answer 3

捎带马蒂纳斯的回答。我对其进行了修改以包含范围中的最后一个值：

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

你的方法很好。我想到的另一个选择是使用过滤器，这样您就不必用 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/

附：在您的主要帖子中的示例中，您没有将var 放在i 前面。因此，i 在您的示例中被声明为全局变量。

Answer 5

在 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 6

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 7

另一种没有 for 循环的方法是：

控制器：

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

视图绑定：

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

Answer 8

请添加 ng-model，如下所示

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

在此之后，您的示例将在 jsfiddle 中运行