带有简单数组 init 的 n- 选项

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

我有一个简单的数组，我想用它初始化一个 select。但是，我希望选项 value = label。

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。

190038 次浏览
小开

你可以像这样使用 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时，你可以得到隐藏的输入值。

演示

被选中了 重复

小开
最佳答案

你第三次尝试的时候就说对了。

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

小开

你可以用

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

使用 n- 选择，预先选择选项，以防 myselect 被预先填充。

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

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

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

混蛋

小开

如果您像下面这样设置您的选择:

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


提交答案