Question

我有一个select元素定义如下：

<select name="country_id" id="country_id" required="required" ng-model="newAddressForm.country_id">
    <option value="">Select Country</option>
    <option ng-repeat="country in countries" value="{{country.id}}">{{country.name}}</option>
</select>

当我在包含此select元素的指令中没有设置任何值时，一切正常。但是当我执行newAddressForm.country_id = 98之类的操作时，而不是选择值为98的选项，Angular会在select元素的顶部注入一个新选项，如下所示：

<option value="? string:98 ?"></option>

是什么给出的？这种格式是什么，为什么会发生这种情况？请注意，如果我在指令中执行console.log(newAddressForm.country_id)，我会得到一个正常的"98"，这在生成的HTML中很奇怪。

修改 情境更新。切换为使用ng-select，但问题仍然存在。

奇怪的元素不再出现，但是，现在顶部还有另一个元素，一个只有问号?作为值，没有标签。

这就是我收集的，Angular的"none selected"选项。我仍然不明白为什么它不会选择我告诉它选择的选项。

执行newAddressForm.country_id = 98仍然没有结果。那是为什么？

Answer 1

在ng-options中使用以下语法为我解决了这个问题：

<select name="country_id" id="country_id" required="required" ng-model="newAddressForm.country_id" ng-options="country.id as country.name for country in countries">
  <option value="">Select Country</option>
</select>

Answer 2

Angular不会将select元素的值设置为数组的实际值，并执行一些内部操作来管理范围绑定。请参阅Mark Rajcok在此链接上的第一条评论：

https://docs.angularjs.org/api/ng/directive/select#overview

当用户选择其中一个选项时，Angular使用索引（或键）查找数组（或对象）中的值 - 查找 value是模型设置的值。（所以，模型没有设置为你在HTML中看到的价值！这会造成很多混乱。）

我不完全确定使用ng-repeat是最佳选择。

Answer 3

如果您的值是整数，则应使用＆＃34;＆＃34;即使他们不是字符串，这个简单的原因正是为什么你得到一个带有问号作为价值的选项。

你不应该使用它：

{ value: 0, name: "Pendiente" },
{ value: 1, name: "Em andamento" },
{ value: 2, name: "Erro" },
{ value: 3, name: "Enviar email" },
{ value: 4, name: "Enviado" }

这是正确的方法：

{ value: "0", name: "Pendiente" },
{ value: "1", name: "Em andamento" },
{ value: "2", name: "Erro" },
{ value: "3", name: "Enviar email" },
{ value: "4", name: "Enviado" }

如果您至少有一条记录没有使用＆＃34;＆＃34;你会得到这个吗？期权价值。

Answer 4

我今天早些时候遇到了同样的问题，在那里我看到一个选择选项显示为我列表中的第一个，即使我没有明确创建它。我在我的控制器中填写了一个选择选项的列表，并使用jessedvrs上面提到的相同的ng-options语法（除了我还在控制器中插入“选择一个选项”默认选项，而不是像在HTML中一样在HTML中标记它是）。

由于某种原因，选择列表将始终在索引零处显示一个附加选项，其值为“？”，但是当我更改了我在控制器中填充默认选项的方式时，此问题就消失了。我通过进行API调用来填充选择选项，将它们填入promise中。我犯了错误，也就是在我的默认“选择一个选项”选项中填充了我在该承诺中做的第一件事，但当我这样做时，而不是在之外的承诺（在进行API调用之前），选择选项填充了我把它们放到的方式。

我认为jessedvrs选项是问题的一种解决方案（在HTML标记中设置默认选项），但如果您希望在javascript中填充选项，我建议在进行任何调用之前仍设置默认选项在呈现HTML时可能仍在运行的API或进程。

Answer 5

为某个select元素赋值时，AngularJS会在该select元素的option标签的value属性中查找提供的值。但问题是， AngularJS进行基于类型的比较。因此，如果选项标签中的值是字符串（通常是这种情况），并且使用ng-model绑定的变量是一个数字，AngularJS无法找到匹配的选项元素，因此，创建自己的元素 -

<option value="? integer:10 ?"></option>

解决方案是，在绑定自身时，将其转换为适当的类型。

在这种情况下，解决方案是绑定整数

<select name="country_id" id="country_id" required="required" ng-model="parseInt(newAddressForm.country_id)">
<option value="">Select Country</option>
<option ng-repeat="country in countries" value="{{country.id}}">{{country.name}}</option>
</select>

如果将值设置为字符串，则诀窍是使用

<select ... ng-model="newAddressForm.country_id.toString()" >

Answer 6

在推送范围变量数据时，我们可以使用以下代码

$scope.enquiryLocationRow.push({'location': EnqLocation.location, 'state_id': Number(EnqLocation.state_id), 'country_id': Number(EnqLocation.country_id)});

它解决了我的问题

Answer 7

在ng-options的末尾使用“按'值'跟踪”：D

类似于下面的示例：

ng-options =“ country.id作为国家/地区的国家/地区名称。

在设置模型值时，Angular会在select元素中添加奇怪的选项

7 个答案: