AngularJS将增量数字添加到选择列表答案

【问题标题】：AngularJS adding incremental numbers to a select listAngularJS将增量数字添加到选择列表
【发布时间】：2015-02-12 23:07:15
【问题描述】：

我想要一个选择框，我可以在其中从具有最小/最大数字的列表中进行选择。

目前我的号码只有 1 到 10，所以我有以下。

<body ng-app="demoApp">
    <div ng-controller="DemoController">
            <select ng-model="selectedItem"
                ng-options="opt as opt for opt in options">
            </select>
            The value selected is {{ selectedItem }}.
    </div>
</body>
angular.module('demoApp', []).controller('DemoController', function($scope) {
  $scope.options = [1,2,3,4,5,6,7,8,9,10];
  $scope.selectedItem = $scope.options[1];
});

这里最好的方法是什么？例如，如果我想从 1 到 100 之间的数字中进行选择，我不想只列出最低和最高的每个数字。使用 vanilla JS，我正在考虑类似下面的内容，但在这里寻找更角度的方法，以便我可以轻松地使用 ng-model 来更新我的数据。

var selectList = '<select>';
for (var x = 0; x < 100; x++) {
      selectList += "<option value="+ x +">" + x + "</option>";
}
selectList += '</select>';

【问题讨论】：

标签： javascript angularjs angular-ngmodel ng-options

【解决方案1】：

angular.module('demoApp', []).controller('DemoController', function($scope) {
  $scope.options = [];

  //Fill array with incremental numbers
  while ($scope.options.length < 100){
    $scope.options.push($scope.options.length + 1);
  }

  $scope.selectedItem = $scope.options[1];
});

【讨论】：

【解决方案2】：

一种可能性是将它变成一个过滤器，特别是如果你要重复使用它：

<select ng-model="selectedItem"
 ng-options="opt as opt for opt in [] | minmax:1:10">
</select>

angular.module("demoApp").filter("minmax", function() {
  return function(arr, min, max) {    
    min = parseInt(min);
    max = parseInt(max);
    for(var i=min; i <= max; i++){
       arr.push(i);
    }
    return arr;
  };
});

参考：https://docs.angularjs.org/api/ng/filter/filter 以进一步了解过滤器的工作原理。

【讨论】：

哦，我喜欢它，又好又干，并且可以在整个项目中轻松重复使用！由于他是相对较新的人，您可能还想在过滤器上添加 Angular js 文档的链接以供参考。

【解决方案3】：

你可以使用 lodash 或下划线 _.range(100);我推荐lodash，

您也可以编写自己的类似这样的函数并将其添加到您在整个项目中使用的实用程序 js 中

    var range = function (n) {
    var numbers = [];
    if (n < 0) return numbers;
    for (var i = 0; i < n; i++)
    numbers.push(i + 1);
    return numbers
}

Lodash

【讨论】：

【解决方案4】：

我马上想到了几个使用 for 循环和 while 循环的例子。

For循环示例：

var x = 0;
var max = 100;

$scope.options = [];

for (x = 0; x < max; x++) {
    $scope.options.push(x);
}

$scope.selectedItem = $scope.options[1];

while 循环的第二种方式如下所示：

var x = 0;
var max = 100;

$scope.options = [];

for (x = 0; x < max; x++) {
    $scope.options.push(x);
}

while (x < max) {
    $scope.options.push(x);
    x++;
}

$scope.selectedItem = $scope.options[1];

这里最重要的是你首先声明你的数组，方括号中没有任何东西来初始化，然后你可以利用 javascripts .push() 通过你的任何样式循环的每次迭代将一个元素附加到数组的末尾喜欢。

参考：http://www.w3schools.com/jsref/jsref_push.asp

希望有帮助！

【讨论】：