以下是困扰很多人(包括我)的问题。
当在AngularJS中使用ng-options指令来填充<select>标记的选项时，我不知道如何为一个选项设置值。这方面的文档确实不清楚——至少对我这样的傻瓜来说是这样。
我可以像这样轻松地设置一个选项的文本:
ng-options="select p.text for p in resultOptions"
例如，当resultOptions为:
[
{
"value": 1,
"text": "1st"
},
{
"value": 2,
"text": "2nd"
}
]
它应该是(可能是)设置选项值最简单的事情，但到目前为止，我只是不明白它。
当前回答
<select ng-model="color" ng-options="(c.name+' '+c.shade) for c in colors"></select><br>
其他回答
请使用属性跟踪来区分选择框中的值和标签。
请尝试
<select ng-options="obj.text for obj in array track by obj.value"></select>
它将为文本分配标签，并为value(来自数组)分配值
我也有这个问题。我不能在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设置一个选择元素的初始选择值。
观看视频。这是一个很好的类:)
运行代码片段并查看变化。为了快速理解，这里有一个注释
例1(对象选择):- ng-option="os.name for os in osList track by os.id"。这里由os跟踪。Id是重要的&应该在那里和os。id不应该出现在os.name之前。 ng-model="my_os"应该设置为一个key为id的对象，例如my_os={id: 2}。 例2(取值选择):- ng-option="os. "id作为osList中os的os.name”。这里由os跟踪。id不应该在那里，os。Id应该在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>
如果你想改变选项元素的值，因为表单最终会提交给服务器，而不是这样做，
<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>
