下拉菜单不会从 Angularjs 中的模型中选择值

Question

我有一个 select 元素，它呈现一个对象列表，没什么特别的。

<select ng-model="defaultObject" ng-options="obj.description for obj in allObjects">
</select>

生成：

<select ng-model="defaultObject" ng-options="obj.description for obj in allObjects">
            <option value="?" selected="selected" label=""></option>
            <option value="0" label="Value 1">Value1</option>
</select>

而且看起来不错。它会生成第一个空选项，因为在渲染时 allObjects 尚未创建，所以这是预期的。

但是，问题在于，当defaultObject 模型设置为代表选择元素内的第二个选项的对象时（Value1），选择元素不会更新所选选项，一切看起来都一样。这就像一个单向绑定，defaultObject 模型可以从下拉列表中设置，但更新defaultObject 不会更新下拉列表以选择该元素。这可以解决吗？

Answer 1

您的代码错误，请尝试使用此代码而不是您的代码（将 obj 更改为 ng-option 中的对象）

<select ng-model="defaultObject" ng-options="object.description for object 
in allObjects"> 
<option ng-if="!defaultObject" value="">Select Object</option>
</select>

您只需为默认选择添加一个选项。

Answer 2

问题是 angular 似乎使用== 来检查数组中的哪些项目已被选中。在 JavaScript 中，包含相同数据的两个对象仍然不是相同的对象，它们是对不同对象的引用：

{a: 1} == {a: 1} // false

最简单的解决方案是在控制器中手动将模型设置为数组中的一个项目：

$scope.defaultObject = $scope.allObjects[0];
// (Or some other index that exists in the array)

---

另一种选择是将<select> 绑定到对象中的特定值，而不是对象本身：

<select
    ng-model="defaultObject"
    ng-options="obj.id as obj.description for obj in allObjects">
</select> <!--       ^ bound value,   ^ display value -->

这将导致选定的obj 的id 存储在$scope.defaultObject 中，并且在页面加载时，将选择obj 和id 中设置的$scope.defaultObject。

这里的缺点是您的模型不包含完整的选定对象，只有id 属性。