AngularJS 将增量数字添加到 select 列表

Question

我想要一个 select 框，我可以从列表中选择 min/max 个数字。

目前我的号码只有 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，我在想类似下面的东西，但在这里寻找更多 angular 方法，这样我就可以轻松地使用 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

你可以使用 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 3

一种可能是将其变成过滤器，尤其是当您要重复使用它时：

<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 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 将增量数字添加到 select 列表

AngularJS adding incremental numbers to a select list

javascript

angularjs

ng-options

angular-ngmodel