AngularJS ng-options创建范围

Question

我正在尝试创建一个选择元素，其中包含数字1到页面数（页面数是一个变量，表示我拥有的页面数量）。我不知道如何构建ng-options表达式，以便它会给我所需的数字。以下是我到目前为止的代码：

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

我需要在ng-options表达式中放什么，才能创建类似于下面的select：

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

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

- d_boggus

---

这是一个巧妙的把戏，但为什么不直接使用类型为数字的HTML输入呢？你甚至可以指定范围。 - Kraken

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/

另外，在您主贴中的示例中，您没有在i之前加上var。因此，在您的示例中，i被声明为全局变量。

- Andrew Joslin

---

这很好，但是我如何在ng-options中使用过滤器？我有大约1300页，所以我不能列出它们所有的页面，我需要能够跳转到任何页面，因此使用select元素是我唯一的选择。修复了for循环中未声明的变量。 - d_boggus

我在jsfiddle上尝试了一下，但它不起作用。http://jsfiddle.net/J4AYh/。编辑： 但是我能够让它在我的页面上工作。你能否在jsfiddle上制作一个可行的示例？ - d_boggus

我不知道为什么它不起作用。我猜你的Range函数是最好的。 - Andrew Joslin

你的过滤方法在我的网站上可用，但我无法让它在 jsfiddle 上工作，这让我感到很奇怪。我没有经常使用 jsfiddle，所以不确定是我做错了什么还是其他问题。谢谢你的回答。 - d_boggus

我用CoffeeScript写了一个不错的版本：https://gist.github.com/Dorian/311c7563fe6af6563d6f - Dorian

你的 jsfiddle 示例中的范围是包含的 (i<=max vs. i<max)，这对我来说更有意义。这个答案中的代码应该改成匹配吗？ - phatfingers

Answer 2

另一个将所有内容保留在模板中的解决方案：

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

- Adam Boostani

---

使用[].constructor而不是花哨的“range”制造器很整洁。 - emyller

@iMad 这会返回一个单一的选项，它是 NaN。如何修复这个问题呢？我正在使用 Angular 5。 - Atul Rajput

Answer 3

请添加ng-model，如下所示：

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

在此之后，您的示例将在 jsfiddle 中正常工作。

- user2003449

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

- martynas

---

这是最好的答案。 - Robin van Baalen

请看下面我编辑的内容，它将会是范围内的最后一个值。 - Johnny

Answer 5

另一种无需循环的方法如下：

控制器：

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

视图绑定：

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

- CodeToad

---

请纠正我，但这仅适用于您想从0开始的情况。 - d_boggus

你可以始终使用“arr.indexof(i)+1 for i in arr”来进行编程。 - CodeToad

Answer 6

借鉴martynas的回答，我对其进行了修改，以包括范围内的最后一个值。

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

- Johnny

---

几乎完美，但如果start=end，则返回空数组。在parseInts之后添加以下内容以进行修复：if(start===end) return [start]; - Konamiman

Answer 7

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

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

- Farhan Ghumra

Answer 8

使用 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>

这里是包含Javascript代码的gist链接

- Dorian