Angular 将模型设置为 null 不会选择空选项答案

【问题标题】：Angular set model to null does not select empty optionAngular 将模型设置为 null 不会选择空选项
【发布时间】：2014-08-19 11:37:42
【问题描述】：

http://plnkr.co/edit/JVMZqnY5Vilek4NxDNGE?p=preview

有一个这样的选择（这里没什么异常）：

 <select ng-model="model.selectedValue"
         ng-options="value.id as value.value for value in modelOptions">
 <option value="" ng-if="!model.selectedValue">Null</option>

最初模型是空的，所以当页面第一次打开时选择了空选项。

$scope.model ={"selectedValue":null};

但是，如果我随后将所选值更改为其他值，然后通过单击这两个按钮返回 null

<button ng-click="model.selectedValue=1">Select Yes</button>
<button ng-click="model.selectedValue=null">Select Null</button>

然后未选择 Null 选项 - 所以现在 UI 与模型不同步。

显然这是 Angular (1.2.22) 的一个错误，但有什么解决方法吗？

【问题讨论】：

标签： angularjs

【解决方案1】：

将ng-if 更改为ng-show：

<option value="" ng-show="!model.selectedValue">Null</option>

这是因为ng-if 创建了一个新范围，所以您也可以在$parent 旁边使用ng-if： <option value="" ng-if="!$parent.model.selectedValue">Null</option>

【讨论】：

谢谢，ng-show 确实解决了这个问题。奇怪的是ng-if="!model.selectedValue" ng-if 本身工作正常 - 它总是按预期删除并添加回option。 select 中的绑定会因 option 被删除并重新添加而感到困惑。
实际上，我说得太早了——ng-show 和$parent 都修复了 Chrome 中的问题，但在 IE 10 中它们修复了绑定问题，但又导致了另一个问题——现在 Null 选项不是当我选择是或否时不再删除。

【解决方案2】：

我在https://github.com/angular/angular.js/issues/8670 收到了来自 Angular 团队的答复。

这实际上在版本 1.2.14 之前有效，但他们认为这不是错误。显然正确的做法是不要在 select 中使用 ng-if，而是使用模型，即 select 选项的 Javascript 数组em> 绑定到。

我假设问题中的代码示例，这意味着在 model.selectedValue 上设置一个观察者，并根据需要在 modelOptions 中添加/删除 Null 选项.

【讨论】：