如何在AngularJS的ng-options中设置value属性？

Here is how I solve this problem in a legacy application:

In HTML:

ng-options="kitType.name for kitType in vm.kitTypes track by kitType.id" ng-model="vm.itemTypeId"

In JavaScript:

vm.kitTypes = [
    {"id": "1", "name": "Virtual"},
    {"id": "2", "name": "Physical"},
    {"id": "3", "name": "Hybrid"}
];

...

vm.itemTypeId = vm.kitTypes.filter(function(value, index, array){
    return value.id === (vm.itemTypeId || 1);
})[0];

My HTML displays the option value properly.

It is always painful for developers to with ng-options. For example: Getting an empty/blank selected value in the select tag. Especially when dealing with JSON objects in ng-options, it becomes more tedious. Here I have done some exercises on that.

Objective: Iterate array of JSON objects through ng-option and set selected first element.

Data:

someNames = [{"id":"1", "someName":"xyz"}, {"id":"2", "someName":"abc"}]

In the select tag I had to show xyz and abc, where xyz must be selected without much effort.

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>

By above code sample, you might get out of this exaggeration.

Another reference:

The tutorial ANGULAR.JS: NG-SELECT AND NG-OPTIONS helped me solve the problem:

<select id="countryId"
  class="form-control"
  data-ng-model="entity.countryId"
  ng-options="value.dataValue as value.dataText group by value.group for value in countries"></select>

Please use track by property which differentiate values and labels in select box.

Please try

<select ng-options="obj.text for obj in array track by obj.value"></select>

which will assign labels with text and value with value(from the array)

<select ng-model="output">
   <option ng-repeat="(key,val) in dictionary" value="{{key}}">{{val}}</option>
</select>

For an object:

<select ng-model="mySelect" ng-options="key as value for (key, value) in object"></select>

<select ng-model="color" ng-options="(c.name+' '+c.shade) for c in colors"></select><br>

您可以使用ng-options实现select标记绑定到value和display成员

使用此数据源时

countries : [
              {
                 "key": 1,
                 "name": "UAE"
             },
              {
                  "key": 2,
                  "name": "India"
              },
              {
                  "key": 3,
                  "name": "OMAN"
              }
         ]

您可以使用以下内容将您的选择标签绑定到值和名称

<select name="text" ng-model="name" ng-options="c.key as c.name for c in countries"></select>

它很棒

该ng-options指令未在<options>数组的元素上设置value属性：

使用limit.value as limit.text for limit in limits方式：

将<option>标签设置为limit.text
将limit.value值保存到选择的标签中ng-model

请参阅堆栈溢出问题AngularJS ng-options不呈现值。

根据我的说法，这最适合所有情况：

<select ng-model="mySelection.value">
   <option ng-repeat="r in myList" value="{{r.Id}}" ng-selected="mySelection.value == r.Id">{{r.Name}}
   </option>
</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。使用track by所选项目将始终返回与FirmnessID匹配的对象，而不是与FirmnessID本身匹配的对象。现在，这符合我的标准，那就是它应该返回一个数字值而不是对象，并且ng-options可以通过不为每个生成的选项创建新范围来获得性能改进。

另外，我需要空白的第一行，因此我只需将an添加<option>到<select>元素中。

这是展示我工作的Plunkr。

如果您希望值与文本相同，则可以使用数组简单地执行此操作，而不是使用新的“跟踪依据”功能：

<select ng-options="v as v for (k,v) in Array/Obj"></select>

请注意标准语法之间的区别，这将使值成为对象/数组的键，因此使数组成为0,1,2等。

<select ng-options"k as v for (k,v) in Array/Obj"></select>

k随v变为v随v。

我发现这只是基于常识。（k，v）是将数组/对象拆分为键值对的实际语句。

在“ k as v”语句中，k将是值，而v将是显示给用户的文本选项。我认为“跟踪”是凌乱和过大的。

如果您要更改option元素的值，因为最终会将表单提交给服务器，则可以这样做，而不是这样做，

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

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

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

服务器将接收iron或super作为的值my_hero。

这类似于@neemzy的答案，但是为该value属性指定了单独的数据。