将项目放入列表框中- 在 Angularjs 中说 "opt as opt for opt in months" 是什么意思？

Question

https://angularjsaz.blogspot.com/2015/09/tutorial-28-angularjs-listbox-example.html

表明：

<select style="width: 100%;" size="7" ng-model="currentItems" multiple  
         ng-multiple="true"  
         ng-options="opt as opt for opt in months">
</select>

这行得通。我想了解此语句的作用：opt as opt for opt in months

我也知道 ng-repeat 需要 car in cars。为什么我这里不能用这种东西？

就我而言，汽车是：

cars = [
    {make: 'Mazda', model: 'Miata', year: 2001},
    {make: 'Toyota', model: 'Prius', year: 2013},
]

在他们的例子中，月份是：

months = ['January','February','March','April']

Answer 1

According to the documentation，用于迭代数组数据源的 ng-options（如您的情况）遵循以下模式：

select as label for value in array

其中：

array: an expression which evaluates to an array / object to iterate over.

value: local variable which will refer to each item in the array or each property value of object during iteration.

label: The result of this expression will be the label for element. The expression will most likely refer to the value variable (e.g. value.propertyName).

select: The result of this expression will be bound to the model of the parent element. If not specified, select expression will default to value.

这主要用于将对象数组显示为 select 列表中的选项，您希望在其中迭代对象、标签和绑定到 ng-model 指令的值成为3种不同的东西。在你的例子中，它们只是字符串，所以它基本上是在说 stringSelectValue as stringLabel for stringItem in stringArray.

你可以说 ng-options="month for month in months" 来简化这个例子。如果未提供 select 值，它也会使用标签值作为 select 值。

Answer 2

I also know that ng-repeat takes car in cars. Why can't I use such a thing here?

是的，可以使用 ng-repeat 生成选项：

<select name="repeatSelect" id="repeatSelect" ng-model="data.model">
  <option ng-repeat="option in data.availableOptions" value="{{option.id}}">
    {{option.name}}
  </option>
</select>

有关详细信息，请参阅

AngularJS <select> Directive API Reference — Using ngRepeat to generate <select> options

将项目放入列表框中- 在 Angularjs 中说 "opt as opt for opt in months" 是什么意思？

Put items in list box- What does it mean to say "opt as opt for opt in months" in Angularjs?

javascript

listbox

angularjs