源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 请求的结果,则空项会消失。
8条答案
按热度按时间4smxwvx51#
您第一次尝试的应该可以工作,但是HTML不是我们所期望的。我添加了一个选项来处理最初的“未选择项”情况:
上面的代码会生成以下HTML:
Fiddle
即使Angular使用数字整数作为值,模型(即$scope.region)也将根据需要设置为AL、AK或AS。(当从列表中选择一个选项时,Angular使用该数字值查找正确的数组条目。)
当第一次了解Angular如何实现其“select”指令时,这可能会让人感到困惑。
jbose2ul2#
你不能真正做到这一点,除非你自己在一个ng-repeat中构建它们。
但是......这可能不值得。最好让它按照设计的那样运行,让Angular处理内部工作。Angular以这种方式使用索引,这样你就可以实际上使用整个对象作为一个值。所以你可以使用下拉绑定来选择整个值,而不仅仅是一个字符串,这是非常棒的:
b91juud33#
如果您使用
track by
选项,则会正确写入value
属性,例如:产生:
bsxbgnwa4#
如果为下拉列表指定的型号不存在,则Angular 将生成一个空的选项元素。因此,您必须在选择时显式指定型号,如下所示:
请参考以下内容,因为之前已经回答过:
Why does AngularJS include an empty option in select?和这个fiddle
**更新:**请尝试此更新:
请注意,select中没有空的options元素。
ibrsph3r5#
您可以将模型修改为如下所示:
然后使用
csbfibhn6#
看起来不可能以任何有意义的方式将select的“value”作为一个普通的HTML表单元素来使用,同时也用ng-options将其以认可的方式连接到Angular上。作为一种妥协,我最终不得不在select旁边放置一个隐藏的输入,并让它跟踪与select相同的模型,如下所示(为了简洁起见,所有这些都从真实的的生产代码中简化了很多):
于飞:
Javascript语言:
然后,在我的服务器端代码中,我只查找
params[:profile_id]
(这是一个Rails应用程序,但同样的原理适用于任何地方)。因为隐藏的输入跟踪与select相同的模型,所以它们自动保持同步(不需要额外的javascript)。这是Angular很酷的部分。它几乎弥补了它对value属性所做的副作用。有趣的是,我发现这种技术只适用于没有隐藏的输入标记(这就是为什么我必须使用margin-left:-10000px;将输入移离页面的技巧)。以下两个变体不起作用:
和
我觉得这一定意味着我错过了什么。这似乎太奇怪了,这是一个问题的Angular 。
toiithl67#
您可以使用
在JSON数组中,state是数组中每个对象的变量名。
希望这对你有帮助
s4chpxco8#
请尝试以下操作: