192

我对 Angular 和ng-options.

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

脚本.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。

4

5 回答 5

309

您实际上在第三次尝试中就正确了。

 <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 将在范围更改时正确刷新。

于 2013-08-13T06:34:45.800 回答
35

You can use ng-repeat with option like this:

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

When you submit your form you can get value of input hidden.

DEMO

ng-selected ng-repeat

于 2013-08-13T06:29:45.743 回答
22

如果您设置您的选择如下：

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

于 2015-07-14T19:07:21.007 回答
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 的对象。

于 2014-03-18T16:12:58.943 回答
10 
<select ng-model="option" ng-options="o for o in options">

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

笨蛋

于 2014-08-13T09:12:19.493 回答