以下是困扰很多人(包括我)的问题。

当在AngularJS中使用ng-options指令来填充<select>标记的选项时,我不知道如何为一个选项设置值。这方面的文档确实不清楚——至少对我这样的傻瓜来说是这样。

我可以像这样轻松地设置一个选项的文本:

ng-options="select p.text for p in resultOptions"

例如,当resultOptions为:

[
    {
        "value": 1,
        "text": "1st"
    },
    {
        "value": 2,
        "text": "2nd"
    }
]

它应该是(可能是)设置选项值最简单的事情,但到目前为止,我只是不明白它。


当前回答

一年后,我不得不找到这个问题的答案,因为这些问题都没有给出实际答案,至少对我来说是这样。

你问过如何选择选项,但没有人说这两件事不一样:

如果我们有这样的选项:

$scope.options = [
    { label: 'one', value: 1 },
    { label: 'two', value: 2 }
  ];

我们试着像这样设置一个默认选项:

$scope.incorrectlySelected = { label: 'two', value: 2 };

它不会工作,但如果你尝试选择这样的选项:

$scope.correctlySelected = $scope.options[1];

它会起作用的。

尽管这两个对象具有相同的属性,AngularJS仍然将它们视为DIFFERENT,因为AngularJS是通过引用进行比较的。

看看小提琴http://jsfiddle.net/qWzTb/。

其他回答

如果你想改变选项元素的值,因为表单最终会提交给服务器,而不是这样做,

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

然后,期望的值将以正确的名称通过表单发送。

你可以这样做:

<select ng-model="model">
    <option value="">Select</option>
    <option ng-repeat="obj in array" value="{{obj.id}}">{{obj.name}}</option>
</select>

- - -更新

经过一些更新后,用户frm。Adiputra的解决方案要好得多。代码:

obj = { '1': '1st', '2': '2nd' };
<select ng-options="k as v for (k,v) in obj"></select>

今天我已经为这个问题纠结了一段时间。我通读了AngularJS的文档,这篇文章和其他一些文章,还有一些它们指向的博客。他们都帮助我理解了更细微的细节,但最终这似乎是一个令人困惑的话题。主要是因为ng-options的许多语法细微差别。

最后,对我来说,它归结为少即是多。

给定一个作用域,配置如下:

        //Data used to populate the dropdown list
        $scope.list = [
           {"FirmnessID":1,"Description":"Soft","Value":1},         
           {"FirmnessID":2,"Description":"Medium-Soft","Value":2},
           {"FirmnessID":3,"Description":"Medium","Value":3}, 
           {"FirmnessID":4,"Description":"Firm","Value":4},     
           {"FirmnessID":5,"Description":"Very Firm","Value":5}];

        //A record or row of data that is to be save to our data store.
        //FirmnessID is a foreign key to the list specified above.
        $scope.rec = {
           "id": 1,
           "FirmnessID": 2
        };

这就是我想要得到的结果:

        <select ng-model="rec.FirmnessID"
                ng-options="g.FirmnessID as g.Description for g in list">
            <option></option>
        </select>   

注意,我没有使用track by。使用所选项的跟踪将总是返回与FirmnessID匹配的对象,而不是FirmnessID本身。这现在满足了我的标准,即它应该返回一个数值而不是对象,并且使用ng-options来获得它所提供的性能改进,而不是为生成的每个选项创建一个新的作用域。

同样,我需要空白的第一行,所以我简单地在<select>元素中添加了一个<option>。

这是一个展示我作品的Plunkr。

开发人员使用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>
    &lt;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]"&gt;
&lt;/select&gt;
</code></pre>

通过上面的代码示例,您可能会摆脱这种夸张。

另一个参考:

ngOptions指令:

$scope.items = [{name: 'a', age: 20},{ name: 'b', age: 30},{ name: 'c', age: 40}];

Case-1)数组中值的标签: < div > <p>selected item is: {{selectedItem}}</p> . {{selectedItem} <p>年龄的选定项目是:{{selectedItem。年龄}}< / p > <select ng-model="selectedItem" ng-options="item.name for item in items"> < /选择> < / div >

输出说明(假设选择了第一项):

selectedItem = {name: 'a', age: 20} //[默认情况下,所选项目等于值item]

selectedItem.age = 20

Case-2)为数组中的值选择标签: < div > <p>selected item is: {{selectedItem}}</p> . {{selectedItem} <select ng-model="selectedItem" ng-options="item。年龄为项目"> "中项目的item.name < /选择> < / div >

输出说明(假设选择了第一项): selectedItem = 20 // [select part is item.age]