AngularJS - select的值属性

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>

Fiddle

即使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>