47

我有一个这样定义的选择元素：

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

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

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

是什么赋予了？这是什么格式，为什么会这样？请注意，如果我console.log(newAddressForm.country_id)在指令中执行 a ，我会得到一个 normal "98"，这在生成的 HTML 中很奇怪。

编辑： 情况更新。切换到使用ng-select，但问题仍然存在。

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

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

做newAddressForm.country_id = 98仍然没有结果。这是为什么？

4

7 回答 7

20

使用以下语法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>
于 2014-07-15T08:39:57.627 回答
16

Angular 不会将选择元素的值设置为数组的实际值，而是做一些内部事情来管理范围绑定。请参阅此链接上的 Mark Rajcok 的第一条评论：

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

当用户选择其中一个选项时，Angular 使用索引（或键）在数组（或对象）中查找值——查找到的值就是模型设置的值。（因此，模型没有设置为您在 HTML 中看到的值！这会引起很多混乱。）

我不完全确定使用 anng-repeat是最好的选择。

于 2013-05-28T03:22:33.497 回答
2

如果您的值是整数，即使它们不是字符串，您也应该使用 ""，这个简单的原因正是您获得带有问号作为值的选项的原因。

你不应该使用这个： 

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

如果您至少有一条不使用“”的记录，您会得到这个吗？期权价值。

于 2016-02-25T22:36:43.327 回答
1

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

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

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

于 2014-12-06T07:10:16.197 回答
1

在 ng-options 的末尾使用“track by 'value'”：D

像下面的例子：

ng-options="country.id as country.name for country in countries 由 country.id 跟踪"

于 2019-04-12T18:11:29.477 回答
1

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

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

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

在这种情况下，解决方案是绑定一个 Integer

<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()" >
于 2017-04-21T14:26:02.487 回答
0

While pushing data on scope variable we can use following code 

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

it resolved my issue

于 2017-05-12T07:28:23.207 回答