我有这样定义的选择元素:
<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的选项:
newAddressForm.country_id = 98
<option value="? string:98 ?"></option>
是什么赋予了?这是哪种格式,为什么会发生?请注意,如果我console.log(newAddressForm.country_id)在指令中执行,我会得到一个normal "98",它只是在生成的HTML中很奇怪。
console.log(newAddressForm.country_id)
"98"
编辑: 情况更新。 切换为使用ng-select,但问题仍然存在。
ng-select
但是,奇怪的元素不再出现,但是,顶部还有另一个元素,该元素只有一个问号?作为值,而没有标签。
?
根据我的收集,这就是Angular的"none selected"选择。我仍然不明白为什么它不会选择我告诉它选择的选项。
"none selected"
这样做newAddressForm.country_id = 98仍然没有结果。这是为什么?
Angular不会将select元素的值设置为数组的实际值,而是做了一些内部操作来管理作用域绑定。在此链接上查看Mark Rajcok的第一条评论:
https://docs.angularjs.org/api/ng/directive/select#overview
当用户选择选项之一时,Angular使用索引(或键)在数组(或对象)中查找值- 查找值就是模型所设置的值。(因此,未将模型设置为您在HTML中看到的值!这会引起很多混乱。)
我不完全确定使用ng-repeat“最佳”选择。
ng-repeat