如何为选择选项设置 value 属性？

源 JSON 数据是:

[
{"name":"Alabama","code":"AL"},
{"name":"Alaska","code":"AK"},
{"name":"American Samoa","code":"AS"},
...
]

我尽力了

ng-options="i.code as i.name for i in regions"

但我得到的是:

<option value="?" selected="selected"></option>
<option value="0">Alabama</option>
<option value="1">Alaska</option>
<option value="2">American Samoa</option>

而我期望得到的是:

<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AS">American Samoa</option>

那么，如何获得价值属性和摆脱“ ?”项？

顺便说一下，如果我将 $scope.region 设置为静态 JSON 而不是 AJAX 请求的结果，那么空项就会消失。

136580 次浏览
小开

你不能真正做到这一点，除非你自己构建它们在一个 ng-repeat 中。

<select ng-model="foo">
<option ng-repeat="item in items" value="\{\{item.code}}">\{\{item.name}}</option>
</select>

但是... 可能不值得。最好让它的功能设计，让角处理的内部工作。Angular 以这种方式使用索引，因此实际上可以使用整个对象作为值。因此，你可以使用下拉绑定来选择一个完整的值，而不仅仅是一个字符串，这是非常棒的:

<select ng-model="foo" ng-options="item as item.name for item in items"></select>


\{\{foo | json}}
小开

如果为下拉列表指定的模型不存在，那么 angle 将生成一个空选项元素。因此，您必须像下面这样显式地在 select 上指定模型:

<select ng-model="regions[index]" ng-options="....">

如前所述，请参阅以下内容:

为什么 AngularJS 在 select 中包含一个空选项

更新: 试试这个:

<select ng-model="regions[index].code" ng-options="i.code as i.name for i in regions">
</select>


or


<select ng-model="regions[2]" ng-options="r.name for r in regions">
</select>

注意，select 中没有空的 options 元素。

小开

您可以修改您的模型，使其看起来像下面这样:

$scope.options = {
"AL" : "Alabama",
"AK" : "Alaska",
"AS" : "American Samoa"
};

那就用

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

您首先尝试的方法应该可以工作，但是 HTML 并不是我们所期望的。我添加了一个选项来处理最初的“无选项”情况:

<select ng-options="region.code as region.name for region in regions" ng-model="region">
<option style="display:none" value="">select a region</option>
</select>
<br>selected: \{\{region}}

上面生成的 HTML:

<select ng-options="..." ng-model="region" class="...">
<option style="display:none" value class>select a region</option>
<option value="0">Alabama</option>
<option value="1">Alaska</option>
<option value="2">American Samoa</option>
</select>

小提琴

即使 Angular 使用数字整数作为值，模型(例如 $scope.region)也将按照需要设置为 AL、 AK 或 AS。(当从列表中选择一个选项时，Angular 使用数值来查找正确的数组条目。)

当我们第一次了解 Angular 如何实现它的“ select”指令时，这可能会让人感到困惑。

小开

似乎不可能以任何有意义的方式使用 select 的“值”作为一个普通的 HTML 表单元素，也不可能使用 ng- 选项以经过批准的方式将其连接到 Angular。作为一种妥协，我最终不得不在我的 select 旁边放置一个隐藏的输入，并让它跟踪与我的 select 相同的模型，像这样(为了简洁起见，从实际的生产代码中非常简化) :

HTML:

<select ng-model="profile" ng-options="o.id as o.name for o in profiles" name="something_i_dont_care_about">
</select>
<input name="profile_id" type="text" style="margin-left:-10000px;" ng-model="profile"/>

Javascript:

App.controller('ConnectCtrl',function ConnectCtrl($scope) {
$scope.profiles = [{id:'xyz', name:'a profile'},{id:'abc', name:'another profile'}];
$scope.profile = -1;
}

然后，在我的服务器端代码中，我只查找 params[:profile_id](这碰巧是一个 Rails 应用程序，但同样的原则适用于任何地方)。因为隐藏输入跟踪的是与 select 相同的模型，所以它们自动保持同步(不需要额外的 javascript)。这是 Angular 最酷的部分。它几乎弥补了它对 value 属性的副作用。

有趣的是，我发现这种技术只适用于不隐藏的输入标记(这就是为什么我必须使用页边距-left:-10000px; 将输入移出页面的技巧)。这两种变化都不起作用:

<input name="profile_id" type="text" style="display:none;" ng-model="profile"/>

还有

<input name="profile_id" type="hidden" ng-model="profile"/>

我觉得这一定意味着我错过了什么。这看起来太奇怪了，不像是 Angular 的问题。

小开

如果使用 track by选项，则 value属性的编写是正确的，例如:

<div ng-init="a = [{label: 'one', value: 15}, {label: 'two', value: 20}]">
<select ng-model="foo" ng-options="x for x in a track by x.value"/>
</div>

生产:

<select>
<option value="" selected="selected"></option>
<option value="15">one</option>
<option value="20">two</option>
</select>
小开

你可以利用

state.name for state in states track by state.code

在 JSON 数组中，state 是数组中每个对象的变量名。

希望这个能帮上忙

小开

试试下面的方法:

var scope = $(this).scope();
alert(JSON.stringify(scope.model.options[$('#selOptions').val()].value));

提交答案