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

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

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

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

例如,当resultOptions为:

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

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


当前回答

就像很多人之前说的,如果我有这样的数据:

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)

其他回答

你可以这样做:

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

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

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

如果我们有这样的选项:

$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 options的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
    }
});

正如你在fiddle输出中看到的,无论你为选择框选项选择了什么,它都是你的自定义值,或者AngularJS自动生成的0、1、2值,这在你的输出中并不重要,除非你使用jQuery或任何其他库来访问选择组合框选项的值并相应地操作它。

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]

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

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

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