angularjs 如何设置选择选项的值属性?

2uluyalo  于 2022-10-31  发布在  Angular
关注(0)|答案(8)|浏览(311)

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

4smxwvx5

4smxwvx51#

您第一次尝试的应该可以工作,但是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”指令时,这可能会让人感到困惑。

jbose2ul

jbose2ul2#

你不能真正做到这一点,除非你自己在一个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}}
b91juud3

b91juud33#

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

bsxbgnwa4#

如果为下拉列表指定的型号不存在,则Angular 将生成一个空的选项元素。因此,您必须在选择时显式指定型号,如下所示:

<select ng-model="regions[index]" ng-options="....">

请参考以下内容,因为之前已经回答过:
Why does AngularJS include an empty option in select?和这个fiddle

**更新:**请尝试此更新:

<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中没有空的options元素。

ibrsph3r

ibrsph3r5#

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

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

然后使用

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

csbfibhn6#

看起来不可能以任何有意义的方式将select的“value”作为一个普通的HTML表单元素来使用,同时也用ng-options将其以认可的方式连接到Angular上。作为一种妥协,我最终不得不在select旁边放置一个隐藏的输入,并让它跟踪与select相同的模型,如下所示(为了简洁起见,所有这些都从真实的的生产代码中简化了很多):
于飞:

<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应用程序,但同样的原理适用于任何地方)。因为隐藏的输入跟踪与select相同的模型,所以它们自动保持同步(不需要额外的javascript)。这是Angular很酷的部分。它几乎弥补了它对value属性所做的副作用。
有趣的是,我发现这种技术只适用于没有隐藏的输入标记(这就是为什么我必须使用margin-left:-10000px;将输入移离页面的技巧)。以下两个变体不起作用:

<input name="profile_id" type="text" style="display:none;" ng-model="profile"/>

<input name="profile_id" type="hidden" ng-model="profile"/>

我觉得这一定意味着我错过了什么。这似乎太奇怪了,这是一个问题的Angular 。

toiithl6

toiithl67#

您可以使用

state.name for state in states track by state.code

在JSON数组中,state是数组中每个对象的变量名。
希望这对你有帮助

s4chpxco

s4chpxco8#

请尝试以下操作:

var scope = $(this).scope();
alert(JSON.stringify(scope.model.options[$('#selOptions').val()].value));

相关问题