javascript - 清除数组后不会更新 ng-options 绑定(bind)变量

Question

我正在使用一个数组来填充包含 ng-options 的列表，以及一个绑定(bind)到所选项目的属性。清除数组后，绑定(bind)变量 myObject.selectedItem 保留最后选择的项目的值。

HTML:

<select ng-model="myObject.selectedItem" ng-options="item.Id as item.Name for item in myArrayList | orderBy:'Id'" required>
    <option value="">Select something</option>
</select>

JS:

$scope.myArrayList = [ { Id: 1, Name: "Item 1" }, { Id: 2, Name: "Item 2" } ];
$scope.myObject = { selectedItem: null };

...选择项目 2 后:

$scope.myArrayList.length = 0;              // Clears the array
console.log($scope.myObject.selectedItem);  // Prints: 2

这是正常行为吗？

Answer 1

这是完全正常的行为。

ng-model 是独立于支持数组呈现的选项的绑定(bind)。因此，更改 ng-options 的来源对 ng-model 绑定(bind)属性没有影响。

如果要清空数组，还需要在设置后备数组长度后将 myObject.selectedItem 设置为 null。

如果您打算经常执行此类操作并希望它动态更新 myObject.selectedItem，您可以随时在 myArrayList 上注册一个观察者并设置 如果长度更新为 0，则 selectedItem 为 null。