AngularJS - 选择的值属性 [英] AngularJS - value attribute for select

问题描述

源 JSON 数据为:

<预><代码>[{"name":"Alabama","code":"AL"},{"name":"Alaska","code":"AK"},{"name":"美属萨摩亚","code":"AS"},...]

我试试

ng-options="i.code as i.name for i in region"

但我得到:

虽然我期待得到:

阿拉巴马州<option value="AK">阿拉斯加</option><option value="AS">美属萨摩亚</option>

那么，如何获取值属性并去掉?"项目?

顺便说一下，如果我将 $scope.regions 设置为静态 JSON 而不是 AJAX 请求的结果，空项目就会消失.

解决方案

您第一次尝试的应该可行，但 HTML 不是我们所期望的.我添加了一个选项来处理初始未选择项目"的情况:

<option style="display:none" value="">选择一个区域</option></选择>
已选择:{{区域}}
以上生成此 HTML:
<option style="display:none" value class>选择一个区域</option><option value="0">阿拉巴马州</option><option value="1">阿拉斯加</option><option value="2">美属萨摩亚</option></选择>

小提琴

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

当第一次学习 Angular 如何实现其选择"指令时，这可能会令人困惑.

Source JSON data is:

[
  {"name":"Alabama","code":"AL"},
  {"name":"Alaska","code":"AK"},
  {"name":"American Samoa","code":"AS"},
  ...
]

I try

ng-options="i.code as i.name for i in regions"

but am getting:

<option value="?" selected="selected"></option>
<option value="0">Alabama</option>
<option value="1">Alaska</option>
<option value="2">American Samoa</option>

while I am expecting to get:

<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AS">American Samoa</option>

So, how to get value attributes and get rid of "?" item?

By the way, if I set the $scope.regions to a static JSON instead of AJAX request's result, the empty item disappears.

解决方案

What you first tried should work, but the HTML is not what we would expect. I added an option to handle the initial "no item selected" case:

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

The above generates this 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

Even though Angular uses numeric integers for the value, the model (i.e., $scope.region) will be set to AL, AK, or AS, as desired. (The numeric value is used by Angular to lookup the correct array entry when an option is selected from the list.)

This may be confusing when first learning how Angular implements its "select" directive.

这篇关于AngularJS - 选择的值属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！