这似乎困扰着很多人（包括我）。

当ng-options在AngularJS中使用指令填充<select>标签的选项时，我无法弄清楚如何为选项设置值。对此的文档确实不清楚-至少对于像我这样的简单人而言。

我可以像这样轻松设置选项的文本：

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

resultOptions例如，何时：

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

设置选项值应该是（可能是）最简单的事情，但是到目前为止，我还是不明白。

参见ngOptions

ngOptions（可选） – { comprehension_expression=} –以下形式之一：

对于数组数据源： label for value in array select as label for value in array label group by group for value in array select as label group by group for value in array track by trackexpr 对于对象数据源： label for (key , value) in object select as label for (key , value) in object label group by group for (key, value) in object select as label group by group for (key, value) in object

就您而言，应该是

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

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

更新资料

通过AngularJS的更新，现在可以为带有表达式value的selectelement 属性设置实际值track by。

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

如何记住这些丑陋的东西

对于所有很难记住这种语法形式的人：我同意这不是最简单或最漂亮的语法。这种语法是Python列表理解的扩展版本，并且知道这有助于我非常轻松地记住该语法。就像这样：

Python代码：

my_list = [x**2 for x in [1, 2, 3, 4, 5]]
> [1, 4, 9, 16, 25]

# Let people to be a list of person instances
my_list2 = [person.name for person in people]
> my_list2 = ['Alice', 'Bob']

这实际上与上面列出的第一个语法相同。但是，<select>我们通常需要区分代码中的实际值和<select>元素中显示的文本（标签）。

就像，我们需要person.id代码，但是我们不想向id用户显示。我们想显示它的名字。同样，我们person.name对代码不感兴趣。有as关键字标记东西。这样就变成了这样：

person.id as person.name for person in people

或者，代替person.id我们可能需要person实例/引用本身。见下文：

person as person.name for person in people

对于JavaScript对象，也适用相同的方法。只要记住对象中的项目是用(key, value)成对解构的。

值属性如何获得其值：

• 当使用数组作为数据源时，它将是每次迭代中数组元素的索引；
• 将对象用作数据源时，它将是每次迭代中的属性名称。

因此，在您的情况下应该是：

obj = { '1': '1st', '2': '2nd' };

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

我也有这个问题。我无法在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设置select元素的初始选择值”中学到的。

观看视频。这是一个很好的课程:)

如果您要更改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属性指定了单独的数据。

使用起来似乎ng-options很复杂（可能令人沮丧），但实际上，我们存在体系结构问题。

AngularJS用作动态HTML + JavaScript应用程序的MVC框架。尽管其（V）iew组件确实提供了HTML“模板”，但其主要目的是通过控制器将用户操作与模型更改相关联。因此，在AngularJS中可以使用的适当抽象级别是select元素将模型中的值设置为来自查询的值。

• 查询行如何呈现给用户是（V）iew的关注点，并ng-options提供for关键字来指示option元素的内容应为ie p.text for p in resultOptions。
• （M）odel关心的是如何将所选行呈现给服务器。因此，ng-options提供了as关键字以指定要提供给模型的值，如中所示k as v for (k,v) in objects。

正确的解决方案是本质上是体系结构的问题，涉及重构HTML，以便（M）odel在需要时执行服务器通信（而不是用户提交表单）。

如果不需要MVC HTML页面来解决眼前的问题，请：仅使用AngularJS（V）iew组件的HTML生成部分。在这种情况下，请遵循用于生成元素（如<li />'s under <ul />'）的相同模式，并将ng-repeat放在option元素上：

<select name=“value”>
    <option ng-repeat=“value in Model.Values” value=“{{value.value}}”>
        {{value.text}}
    </option>
</select>

作为kludge，您总是可以将select元素的name属性移动到隐藏的输入元素：

<select ng-model=“selectedValue” ng-options=“value.text for value in Model.Values”>
</select>
<input type=“hidden” name=“value” value=“{{selectedValue}}” />

你可以这样做：

<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。使用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将是显示给用户的文本选项。我认为“跟踪”是凌乱和过大的。

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

<select ng-model="mySelection.value">
   <option ng-repeat="r in myList" value="{{r.Id}}" ng-selected="mySelection.value == r.Id">{{r.Name}}
   </option>
</select>

您可以在其中使用模型绑定数据的位置。您将获得该对象将包含的值，并根据您的方案选择默认值。

这就是我解决这个问题的方式。我跟踪了按值选择，并在我的JavaScript代码中将选择的项目属性设置为模型。

Countries =
[
    {
        CountryId = 1, Code = 'USA', CountryName = 'United States of America'
    },
    {
       CountryId = 2, Code = 'CAN', CountryName = 'Canada'
    }
]

<select ng-model="vm.Enterprise.AdminCountry" ng-options="country.CountryName for country in vm.Countries track by country.CountryId">

vm是我的控制者，从服务中检索到的控制器中的国家/地区是{CountryId =1, Code = 'USA', CountryName='United States of America'}。

当我从选择下拉列表中选择另一个国家并用“保存”发布页面时，我得到了正确的国家限制。

该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="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>

它很棒

用户frm.adiputra提供了对该问题的正确答案，因为当前这似乎是显式控制选项元素的value属性的唯一方法。

但是，我只是想强调一下，“选择”在此上下文中不是关键字，而只是表达式的占位符。请参考以下列表，以获取“ select”表达式以及ng-options指令中可以使用的其他表达式的定义。

问题中描述了select的使用：

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

本质上是错误的。

根据表达式列表，当在对象数组中给出选项时，trackexpr似乎可以用于指定值，但仅用于分组。

从AngularJS的ng-options文档中：

• array / object：一个表达式，其结果为要迭代的数组/对象。
• value：局部变量，它将在迭代期间引用数组中的每个项目或对象的每个属性值。
• key：局部变量，它将在迭代期间引用对象中的属性名称。
• label：此表达式的结果将是element的标签。该表达式很可能引用值变量（例如value.propertyName）。
• select：此表达式的结果将绑定到父元素的模型。如果未指定，则选择表达式将默认为value。
• group：此表达式的结果将用于使用DOM元素对选项进行分组。
• trackexpr：在处理对象数组时使用。该表达式的结果将用于识别数组中的对象。trackexpr很可能会引用值变量（例如value.propertyName）。

在ng-options中选择一个项目可能有些棘手，具体取决于您如何设置数据源。

与他们奋斗了一段时间之后，我最终使用了我使用的最常见数据源制作了一个样本。你可以在这里找到它：

http://plnkr.co/edit/fGq2PM?p=preview

现在要使ng-options起作用，需要考虑以下几点：

1. 通常，您从一个来源获得选项，而从另一个来源获得选择的值。例如：
   • 州:: ng-options的数据
   • user.state ::设置为选中状态的选项
2. 基于1，最简单/逻辑的操作是用一个源填充选择，然后设置所选值的低谷代码。很少有一个混合的数据集会更好。
3. AngularJS允许选择控件保留多个key | label。许多在线示例将对象设置为“键”，如果您需要以这种方式设置对象的信息，则使用您需要的特定属性作为键。（ID，CODE等。如在plckr示例中一样）

4. 设置下拉/选择控件的值的方式取决于＃3，

   • 如果下拉键是单个属性（例如在plunkr中的所有示例中），则只需对其进行设置，例如： $scope.dropdownmodel = $scope.user.state;

   • 如果将对象设置为键，则需要遍历选项，即使分配对象也不会将该项目设置为选中状态，因为它们具有不同的哈希键，例如：

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

您可以将saveValue替换为其他对象中的同一属性$scope.myObject.myProperty。

对我来说，布鲁诺·戈麦斯（Bruno Gomes）的答案是最好的答案。

但是实际上，您不必担心设置选择选项的value属性。AngularJS会解决这个问题。让我详细解释。

请考虑这个小提琴

angular.module('mySettings', []).controller('appSettingsCtrl', function ($scope) {

    $scope.timeFormatTemplates = [{
        label: "Seconds",
        value: 'ss'
    }, {
        label: "Minutes",
        value: 'mm'
    }, {
        label: "Hours",
        value: 'hh'
    }];


    $scope.inactivity_settings = {
        status: false,
        inactive_time: 60 * 5 * 3, // 15 min (default value), that is, 900 seconds
        //time_format: 'ss', // Second (default value)
        time_format: $scope.timeFormatTemplates[0], // Default seconds object
    };

    $scope.activity_settings = {
        status: false,
        active_time: 60 * 5 * 3, // 15 min (default value), that is,  900 seconds
        //time_format: 'ss', // Second (default value)
        time_format: $scope.timeFormatTemplates[0], // Default seconds object
    };

    $scope.changedTimeFormat = function (time_format) {
        'use strict';

        console.log('time changed');
        console.log(time_format);
        var newValue = time_format.value;

        // do your update settings stuffs
    }
});

如您在小提琴输出中所见，无论您为选择框选项选择的是自定义值，还是AngularJS自动生成的0、1、2值，在您的输出中都没有关系，除非您使用的是jQuery或其他其他库可访问该选择的组合框选项的值并相应地进行操作。

提出问题的一年后，我必须找到该问题的答案，因为其中至少没有一个给出了实际答案。

您已经问过如何选择选项，但是没有人说这两件事是不一样的：

如果我们有这样的选择：

$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 ng-options="obj.text for obj in array track by obj.value"></select>

这将分配带有文本的标签和带有值的值（来自数组）

对于对象：

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

对于开发人员来说，使用ng-option总是很痛苦的。例如：在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>

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

另一个参考：

教程ANGULAR.JS：NG-SELECT和NG-OPTIONS帮助我解决了这个问题：

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

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

运行代码片段并查看变化。这里是为了快速理解的注意事项

1. 示例1（对象选择）：- ng-option="os.name for os in osList track by os.id"。这里track by os.id很重要，应该在这里并且os.id as 不应在此之前os.name。

   • 本ng-model="my_os"应该设置与主要作为对象ID喜欢my_os={id: 2}。

2. 示例2（值选择）：- ng-option="os.id as os.name for os in osList"。这里track by os.id 不应该在那里，也os.id as 应该在那之前os.name。

   • 该ng-model="my_os"应设置的值等my_os= 2

其余代码段将进行解释。

angular.module('app', []).controller('ctrl', function($scope, $timeout){
  
  //************ EXAMPLE 1 *******************
  $scope.osList =[
    { id: 1, name :'iOS'},
    { id: 2, name :'Android'},
    { id: 3, name :'Windows'}
  ]
  $scope.my_os = {id: 2};
  
  
  //************ EXAMPLE 2 *******************
  $timeout(function(){
    $scope.siteList = [
          { id: 1, name: 'Google'},
          { id: 2, name: 'Yahoo'},
          { id: 3, name: 'Bing'}
        ];
   }, 1000);
    
    $scope.my_site = 2;
  
    $timeout(function(){
      $scope.my_site = 3;
    }, 2000);
})

fieldset{
  margin-bottom: 40px;
  }
strong{
  color:red;
  }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.10/angular.min.js"></script>

<div ng-app="app" ng-controller="ctrl">

  <!--//************ EXAMPLE 1 *******************-->
  <fieldset>
    <legend>Example 1 (Set selection as <strong>object</strong>)</legend>
    
    <select ng-model="my_os" ng-options="os.name for os in osList track by os.id">
        <option value="">--Select--</option>
      </select>
    {{my_os}}
    
  </fieldset>
  
  
  <!--//************ EXAMPLE 2 *******************-->
  <fieldset>
    <legend>Example 2 (Set selection as <strong>value</strong>. Simulate ajax)</legend>
      <select ng-model="my_site" ng-options="site.id as site.name for site in siteList">
        <option value="">--Select--</option>
      </select>
      {{my_site}}
  </fieldset>
  
</div>

就像之前说过的，如果我有类似这样的数据：

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

我会像这样使用它：

<select
    ng-model="selectedCountry"
    ng-options="obj.name for obj  in countries">
</select>

在您的控制器中，您需要设置一个初始值以摆脱第一个空项目：

 $scope.selectedCountry = $scope.countries[0];

 // You need to watch changes to get selected value
 $scope.$watchCollection(function() {
   return $scope.selectedCountry
 }, function(newVal, oldVal) {
     if (newVal === oldVal) {
       console.log("nothing has changed " + $scope.selectedCountry)
     } 
     else {
       console.log('new value ' + $scope.selectedCountry)
     }
 }, true)

这是我在旧版应用程序中解决此问题的方法：

在HTML中：

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

在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];

我的HTML正确显示了选项值。

ngOptions指令：

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

• 情况1）数组中值的标签：

  <div>
      <p>selected item is : {{selectedItem}}</p>
      <p> age of selected item is : {{selectedItem.age}} </p>
      <select ng-model="selectedItem" ng-options="item.name for item in items">
      </select>
  </div>

输出说明（假设选择了第一项）：

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

selectedItem.age = 20

• 情况2）选择作为数组中值的标签：

  <div>
      <p>selected item is : {{selectedItem}}</p>
      <select ng-model="selectedItem" ng-options="item.age as item.name for item in items">
      </select>
  </div>

输出说明（假设选择了第一个项目）： selectedItem = 20 // [选择零件是item.age ]