angularjs -如何基于原语而不是模型填充html选择元素选项

Question

基本上，我有一个输入控制元素，您可以在其中输入您拥有的苹果总数，并根据苹果的数量设置您可以制作的迷你苹果派的最大数量(对于每个苹果，您可以制作一个迷你苹果派)。Angularjs文档声明使用ngOptions，但我只想基于一个原语(苹果的总数)，而不是一个模型。

因此，如果我的totalApples值为2，那么我希望生成2个选项(其中一个值为1，另一个值为2)

到目前为止我的代码如下：

HTML代码片段：

<input ng-model="totalApples" />
<select ng-options="">
  <option value="1">1</option>  //what I would like to have is the options generated 
  <option value="2">2</option>
</select>

在我的控制器中我设置了作用域：

 $scope.totalApples = 2;

谢谢

Answer 1

如果您对所选值感兴趣，那么您应该结合使用ng-model和ng-options指令。看看this example吧。

此外，不要与检查选项元素时看到的选项值混淆。Angular确保将正确的值绑定到您的模型。

Answer 2

您可能需要一个自定义函数来为您处理选项的生成。AngularJS指令处理数据，剩下的就看你的了。你的目标是提供它。

在你的控制器中

$scope.options = [];
$scope.generateOptions = function() {
  newOptions = [];
  for (var i = 1; i <= $scope.totalApples; i++) {
    newOptions.push(i);
  }
  $scope.options = newOptions;
}

在您的HTML中，您可以简单地使用repeater，因为对于这个简单的场景，您实际上并不需要select指令。

<input ng-model="totalApples" />
<select>
  <option ng-repeat="option in options" value="{{option}}">{{option}}</option>
</select>
<button ng-click="generateOptions()">Generate options!</button>