42

我正在尝试创建一个选择元素，其中包含数字 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>

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

4

8 回答 8

82

你的方法很好。我想到的另一个选择是使用过滤器，这样您就不必用 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在您的示例中被声明为全局变量。

于 2012-06-22T17:36:05.670 回答
14

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

<select>
  <option ng-repeat="n in [].constructor(10) track by $index+1">{{$index+1}}</option>
</select>
于 2016-12-23T21:04:45.330 回答
8

请添加 ng-model，如下所示

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

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

于 2013-01-23T10:07:51.353 回答
7

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

控制器：

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

视图绑定：

 ng-options="arr.indexof(i) for i in arr"
于 2014-01-29T22:19:24.773 回答
7

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

/* 
 * 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;
  };
});
于 2014-05-28T11:28:57.217 回答
5

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

/*
 * 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;
    };
});
于 2015-05-28T05:48:52.073 回答
0

在 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 的要点

于 2014-06-18T22:33:17.157 回答
0

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

<select>
    <option value="">-- Birth Year --</option>
    <option ng-repeat="n in [] | range:1900:2000">{{n}}</option>
</select>
于 2016-11-24T14:38:57.737 回答