AngularJS - select的value属性

Question

源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请求的结果,则空项目将消失.

Answer 1

你最初尝试的应该是有用的,但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"指令时,这可能会令人困惑.

Answer 2

除非你自己在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}}

Answer 3

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

Answer 4

如果为下拉列表指定的模型不存在,则angular将生成一个空选项元素.所以你必须在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中没有空选项元素.

Answer 5

您可以将模型修改为如下所示:

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

然后用

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