具有简单数组初始化的ng-options


186

我对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的原因。

Answers:


303

您的第三次尝试实际上是正确的。

 <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将正确刷新。


1
你没话题了。您不理解说明。他想要value他的select
EpokK

10
我理解了说明,但是他的意图很可能是将“值”绑定到模型,并且由于AngularJs渲染标签的方式而误解了正在发生的事情。
詹姆斯·戴维斯

3
如果您使用角度获得select的值,则它起作用,但是在我的情况下(即经典提交表单),值将为0、1、2、3,而不是var1,var2,var3
Dragu 2013年

1
我以为您已经绑定到模型了,但是如果您只是使用AngularJS渲染外部提交给angular的表单,请使用EpokK的解决方案。
詹姆斯·戴维斯

66
仅仅是我吗,或者这是有史以来最难理解的语法吗?
fool4jesus 2014年

35

您可以使用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选择的 ng-repeat


如果您不满意我的答案,请检查我的新解决方案。
2013年

21

你可以使用类似

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


1
ng-options也适用于对象数据源。参见docs.angularjs.org/api/ng/directive/select
Charlie

1
尽管其他人提供了解决方法,但此解决方案迄今为止是最优雅,最接近旧html样式的,可用于角度模型绑定和表单提交。谢谢!
Fadi Chamieh 2014年

4
ng-selected不需要把手,因为它是一个角度指令。优秀的解决方案。
Kasey Speakman 2014年

20

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

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


1
该解决方案是唯一适用于我选择字符串数组中的初始值的解决方案。
Ena 2015年

是的,这应该是答案,这是我的魔力。
Gurnard

在执行完上述解决方案后,我最没想到,但这是简单的出路
sac Dahal

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

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

矮人

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.