使用简单数组init的ng-options

Question

我对Angular和ng-options.有点困惑.

我有一个简单的数组,我想用它初始化一个选择.但是,我希望选项值=标签.

的script.js

$scope.options = ['var1', 'var2', 'var3'];

HTML

<select ng-model="myselect" ng-options="o for o in options"></select>

我得到了什么:

<option value="0">var1</option>
<option value="1">var2</option>
<option value="2">var3</option>

我想要的是:

<option value="var1">var1</option>
<option value="var2">var2</option>
<option value="var3">var3</option>

所以我尝试过:

<select ng-model="myselect2" ng-init=0 ng-options="options[k] as v for (k,v) in options"></select>

<select ng-model="myselect3" ng-init=0 ng-options="b as b for b in options"></select>

(但它不起作用.)

编辑:

我的表单是外部提交的,这就是为什么我需要'var1'作为值而不是0.

Answer 1

你在第三次尝试中确实让它变得正确.

 <select ng-model="myselect" ng-options="o as o for o in options"></select>

请参阅此处的工作示例:http: //plnkr.co/edit/xEERH2zDQ5mPXt9qCl6k？p = preview

诀窍在于AngularJS无论如何都将键写为从0到n的数字,并在更新模型时进行转换.

因此,HTML看起来不正确,但在选择值时仍会正确设置模型.(即AngularJS会将'0'翻译回'var1')

Epokk的解决方案也有效,但是如果您异步加载数据,您可能会发现它并不总是正确更新.当范围更改时,使用ngOptions将正确刷新.

Answer 2

您可以使用ng-repeat具有option这样的:

<form>
    <select ng-model="yourSelect" 
        ng-options="option as option for option in ['var1', 'var2', 'var3']"
        ng-init="yourSelect='var1'"></select>
    <input type="hidden" name="yourSelect" value="{{yourSelect}}" />
</form>

当您提交时,您form可以获得隐藏的输入值.

DEMO

ng-selected ng-repeat

Answer 3

你可以用类似的东西

<select ng-model="myselect">
    <option ng-repeat="o in options" ng-selected="{{o==myselect}}" value="{{o}}">
        {{o}}
    </option>
</select>

使用ng-selected,如果预填充了myselect,则会预先选择该选项.

我更喜欢这种方法而不是ng-options,因为ng-options只适用于数组.ng-repeat也适用于类似json的对象.

Answer 4

如果您按以下方式设置选择:

<select ng-model="myselect" ng-options="b for b in options track by b"></select>

你会得到:

<option value="var1">var1</option>
<option value="var2">var2</option>
<option value="var3">var3</option>

工作小提琴:http://jsfiddle.net/x8kCZ/15/

Answer 5

<select ng-model="option" ng-options="o for o in options">

更改后$ scope.option将等于'var1',即使你在生成的html中看到value ="0"

plunker