用简单的数组init初始化ng选项

我有点和Angular和ng-options混淆。

我有一个简单的数组,我想用它初始化一个select。 但是,我想要的选项值=标签。

的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。

在第三次尝试中,你确实已经准确无误了。

  <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看起来不正确,但是在select一个值时,模型仍然会被正确设置。 (即AngularJS将'0'翻译回'var1')

Epokk的解决scheme也可以,但是如果你正在asynchronous加载数据,你可能会发现它并不总是正确地更新。 当范围改变时,使用ngOptions将会正确刷新。

你可以像这样使用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您可以隐藏input的值。


DEMO

ng-selected ng-repeat

如果你设置你的select如下:

 <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/

你可以使用类似的东西

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

使用ng-selected你预先select了myselect预先填好的选项。

无论如何,我更喜欢这个方法,因为ng-options只适用于数组。 ng-repeat也适用于类似json的对象。

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

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

plunker