Question

我有一个选择元素，它呈现一个对象列表，没什么了不起的。

<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模型设置为表示select元素（Value1）内的第二个选项的对象时，select元素不会更新所选选项，所有内容都看起来相同。它类似于单向绑定，defaultObject模型可以从下拉列表中设置，但更新defaultObject不会更新下拉列表以选择该元素。这可以解决吗？

Answer 1

问题是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属性。

Answer 2

您的代码有误，请尝试使用此代码代替您的代码（在ng-option中将obj更改为object）

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

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

下拉列表不会从Angularjs中的模型中选择值

2 个答案: