AngularJS – select的值属性

源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>

Fiddle

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

当第一次学习Angular如何实现其“select”指令时,这可能会令人困惑。

相关文章

ANGULAR.JS:NG-SELECTANDNG-OPTIONSPS:其实看英文文档比看中...
AngularJS中使用Chart.js制折线图与饼图实例  Chart.js 是...
IE浏览器兼容性后续前言 继续尝试解决IE浏览器兼容性问题,...
Angular实现下拉菜单多选写这篇文章时,引用文章地址如下:h...
在AngularJS应用中集成科大讯飞语音输入功能前言 根据项目...
Angular数据更新不及时问题探讨前言 在修复控制角标正确变...