AngularJS-选择的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.regions设置为静态JSON而不是AJAX请求的结果，则空项消失。

您最初尝试过的方法应该可以使用，但是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”指令时，这可能会造成混淆。

除非您自己在ng-repeat中构建它们，否则您无法真正做到这一点。

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

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

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

{{foo | json}}

如果使用该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>

如果为下拉列表指定的模型不存在，则angular将生成一个空的options元素。因此，您将必须在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>

似乎不可能以任何有意义的方式实际使用select的“值”作为普通的HTML表单元素，并且也不能通过ng-options以批准的方式将其连接到Angular。作为一种折衷，我最终不得不在我的选择旁边放置一个隐藏的输入，并使它跟踪与我的选择相同的模型，如下所示（为简洁起见，所有这些都从真实的生产代码中大大简化了）：

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应用程序，但是相同的原理在任何地方都适用）。由于隐藏的输入与选择的模型跟踪相同的模型，因此它们会自动保持同步（无需其他JavaScript）。这是Angular最酷的部分。它几乎弥补了它对value属性所做的副作用。

有趣的是，我发现该技术仅适用于未隐藏的输入标签（这就是为什么我不得不使用margin-left：-10000px;技巧将输入移出页面的原因）。这两个变体不起作用：

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

和

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

我觉得那一定意味着我错过了一些东西。对于Angular来说，这似乎太不可思议了。

您可以使用

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

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

希望这可以帮助

尝试如下：

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