以下是困扰很多人(包括我)的问题。
当在AngularJS中使用ng-options指令来填充<select>标记的选项时，我不知道如何为一个选项设置值。这方面的文档确实不清楚——至少对我这样的傻瓜来说是这样。
我可以像这样轻松地设置一个选项的文本:
ng-options="select p.text for p in resultOptions"
例如，当resultOptions为:
[
{
"value": 1,
"text": "1st"
},
{
"value": 2,
"text": "2nd"
}
]
它应该是(可能是)设置选项值最简单的事情，但到目前为止，我只是不明白它。
当前回答
我也有这个问题。我不能在ng-options中设置我的值。生成的每个选项都设置为0,1，…, n。
为了让它正确，我在ng-options中做了这样的事情:
HTML:
<select ng-options="room.name for room in Rooms track by room.price">
<option value="">--Rooms--</option>
</select>
我使用“track by”来设置所有的room.price值。
(这个例子很糟糕:因为如果有多个价格相等，代码就会失败。所以一定要有不同的值。)
JSON:
$scope.Rooms = [
{ name: 'SALA01', price: 100 },
{ name: 'SALA02', price: 200 },
{ name: 'SALA03', price: 300 }
];
我从一篇博客文章中学会了如何使用Angular.JS ng-options & track by设置一个选择元素的初始选择值。
观看视频。这是一个很好的类:)
其他回答
用一个普通的表单提交发送一个名为my_hero的自定义值给服务器:
JSON:
"heroes": [
{"id":"iron", "label":"Iron Man Rocks!"},
{"id":"super", "label":"Superman Rocks!"}
]
HTML:
<select ng-model="hero" ng-options="obj.id as obj.label for obj in heroes"></select>
<input type="hidden" name="my_hero" value="{{hero}}" />
服务器将接收my_hero的值为iron或super。
这类似于@neemzy的回答，但是为value属性指定了单独的数据。
开发人员使用ng-options总是很痛苦的。例如:在select标记中获取空/空的选定值。特别是在ng-options中处理JSON对象时，它变得更加乏味。这里我已经做了一些练习。
目的:通过ng-option迭代JSON对象数组，并设置选中的第一个元素。
数据:
someNames = [{"id":"1", "someName":"xyz"}, {"id":"2", "someName":"abc"}]
在选择标签中，我必须显示xyz和abc，其中xyz必须毫不费力地选择。
HTML:
<pre class="default prettyprint prettyprinted" style=""><code>
<select class="form-control" name="test" style="width:160px" ng-options="name.someName for name in someNames" ng-model="testModel.test" ng-selected = "testModel.test = testModel.test || someNames[0]">
</select>
</code></pre>
通过上面的代码示例，您可能会摆脱这种夸张。
另一个参考:
ng-options指令不会为数组的<options>元素设置value属性:
使用限制。值为极限。“limits”中的“limit”表示:
将<option>的标签设置为limit.text 保存限制。Value值到选择的ng-model中
参见Stack Overflow问题AngularJS ng-options不呈现值。
在ng-options中选择一个项目可能有点棘手，这取决于您如何设置数据源。
在与它们斗争了一段时间后，我最终用我使用的最常用的数据源制作了一个样本。你可以在这里找到它:
http://plnkr.co/edit/fGq2PM?p=preview
现在要让ng-options工作，需要考虑以下几点:
Normally you get the options from one source and the selected value from other. For example: states :: data for ng-options user.state :: Option to set as selected Based on 1, the easiest/logical thing to do is to fill the select with one source and then set the selected value trough code. Rarely would it be better to get a mixed dataset. AngularJS allows select controls to hold more than key | label. Many online examples put objects as 'key', and if you need information from the object set it that way, otherwise use the specific property you need as key. (ID, CODE, etc.. As in the plckr sample) The way to set the value of the dropdown/select control depends on #3, If the dropdown key is a single property (like in all examples in the plunkr), you just set it, e.g.: $scope.dropdownmodel = $scope.user.state; If you set the object as key, you need to loop trough the options, even assigning the object will not set the item as selected as they will have different hashkeys, e.g.: for (var i = 0, len = $scope.options.length; i < len; i++) { if ($scope.options[i].id == savedValue) { // Your own property here: console.log('Found target! '); $scope.value = $scope.options[i]; break; } }
您可以在另一个对象$scope.myObject.myProperty中替换相同属性的savedValue。
如果你想改变选项元素的值，因为表单最终会提交给服务器，而不是这样做，
<select name="text" ng-model="text" ng-options="select p.text for p in resultOptions"></select>
你可以这样做:
<select ng-model="text" ng-options="select p.text for p in resultOptions"></select>
<input type="hidden" name="text" value="{{ text }}" />
然后，期望的值将以正确的名称通过表单发送。
