一尘不染

设置模型值时,Angular将奇怪的选项添加到选择元素中

angularjs

我有这样定义的选择元素:

<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会在select元素的顶部注入一个新值,而不是选择值为98的选项:

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

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

编辑: 情况更新。 切换为使用ng-select,但问题仍然存在。

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

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

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


阅读 147

收藏
2020-07-04

共1个答案

一尘不染

Angular不会将select元素的值设置为数组的实际值,而是做了一些内部操作来管理作用域绑定。在此链接上查看Mark Rajcok的第一条评论:

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

当用户选择选项之一时,Angular使用索引(或键)在数组(或对象)中查找值-
查找值就是模型所设置的值。(因此,未将模型设置为您在HTML中看到的值!这会引起很多混乱。)

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

2020-07-04