以下是困扰很多人(包括我)的问题。
当在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="output">
<option ng-repeat="(key,val) in dictionary" value="{{key}}">{{val}}</option>
</select>
其他回答
如果你想改变选项元素的值，因为表单最终会提交给服务器，而不是这样做，
<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 }}" />
然后，期望的值将以正确的名称通过表单发送。
运行代码片段并查看变化。为了快速理解，这里有一个注释
例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>
就像很多人之前说的，如果我有这样的数据:
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)
ng-options看起来使用起来很复杂(可能令人沮丧)，但实际上我们有一个架构问题。
AngularJS是动态HTML+JavaScript应用程序的MVC框架。虽然它的(V)视图组件确实提供了HTML“模板”，但它的主要目的是通过控制器将用户操作连接到模型中的更改。因此，在AngularJS中，适当的抽象级别是select元素将模型中的值设置为来自查询的值。
查询行如何呈现给用户是(V)视图关心的问题，ng-options提供了for关键字来指示选项元素的内容应该是什么，即p.text for resultOptions中的p。 所选的行如何呈现给服务器是(M)模型所关心的。因此ng-options提供了as关键字来指定在对象中(k,v)的k和v中向模型提供什么值。
这个问题的正确解决方案是本质上的体系结构，并涉及重构HTML，以便(M)模型在需要时执行服务器通信(而不是用户提交表单)。
如果一个MVC HTML页面对于手头的问题来说是不必要的过度工程:那么只使用AngularJS的(V)视图组件的HTML生成部分。在这种情况下，遵循与生成<ul />'s下的<li />'s相同的模式，并在一个选项元素上放置ng-repeat:
<select name=“value”>
<option ng-repeat=“value in Model.Values” value=“{{value.value}}”>
{{value.text}}
</option>
</select>
作为临时拼凑，我们总是可以将选择元素的name属性移动到一个隐藏的输入元素:
<select ng-model=“selectedValue” ng-options=“value.text for value in Model.Values”>
</select>
<input type=“hidden” name=“value” value=“{{selectedValue}}” />
ng-options指令不会为数组的<options>元素设置value属性:
使用限制。值为极限。“limits”中的“limit”表示:
将<option>的标签设置为limit.text 保存限制。Value值到选择的ng-model中
参见Stack Overflow问题AngularJS ng-options不呈现值。
