Question

我想要一个选择框，我可以从列表中选择最小/最大数字。

目前我的号码只有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>';

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

Answer 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有关过滤器如何工作的进一步阅读。

Answer 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

Answer 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

希望有所帮助！

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

4 个答案: