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不是我们所期望的。 我添加了一个选项来处理最初的“no item selected”情况：
<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。 （当从列表中select一个选项时，Angular将使用该数值来查找正确的数组条目。）
当第一次学习Angular如何实现它的“select”指令时，这可能会令人困惑。
你不能真的这样做，除非你自己build立一个ng-repeat。
<select ng-model="foo"> <option ng-repeat="item in items" value="{{item.code}}">{{item.name}}</option> </select>
但是…这可能是不值得的。 最好让它按照devise的function运行，让Angular处理内部工作。 Angular以这种方式使用索引，所以实际上可以将整个对象用作值。 所以你可以使用下拉式的绑定来select一个完整的值，而不仅仅是一个string，这是非常棒的：
<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会生成一个空的选项元素。 所以你将不得不明确地指定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中没有空的选项元素。
你可以修改你的模型看起来像这样：
$scope.options = { "AL" : "Alabama", "AK" : "Alaska", "AS" : "American Samoa" };
然后使用
<select ng-options="k as v for (k,v) in options"></select>
看起来，不可能以任何有意义的方式实际使用select的“value”作为普通的HTML表单元素，并且以ng-options的方式将其与已批准的方式绑定到Angular。 作为一个妥协，我最终不得不把隐藏的input与我的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应用程序，但同样的原则适用于任何地方）。 由于隐藏的input跟踪select相同的模型，他们保持自动同步（不需要额外的JavaScript）。 这是Angular的一个很酷的部分。 它几乎弥补了它作为一个副作用的价值属性。
有趣的是，我发现这种技术只能处理没有隐藏的input标签（这就是为什么我必须使用margin-left：-10000px;把input从页面移开的技巧）。 这两个变化不起作用：
<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数组的状态中，state是数组中每个对象的variables名称。
希望这可以帮助
尝试如下：
var scope = $(this).scope(); alert(JSON.stringify(scope.model.options[$('#selOptions').val()].value));
