【问题标题】：AngularJS select creates option with value "? object:null ?" and doesn't use empty default option when bound to nullAngularJS 选择创建值为“？对象：空？”的选项并且在绑定为 null 时不使用空默认选项
【发布时间】：2014-05-14 00:22:09
【问题描述】：

代码如下所示

<select ng-model="nullableInt">
  <option></option>
  <option value="0">First option</option>
  <option value="1">First option</option>
  <option value="2">First option</option>
</select>

当 nullableInt 为 null 时，生成的 html 为

<select ng-model="nullableInt">
  <option></option>
  <option value="? object:null ?"></option>
  <option value="0">First option</option>
  <option value="1">First option</option>
  <option value="2">First option</option>
</select>

转载于plunkr：http://plnkr.co/edit/05pBEMJppmkrn3nFgYdk?p=info

值得一提的是，我试图避免使用ng-options，为 AngularJS 创建一个端点以使用一些实际上不会经常更改的数据似乎有点矫枉过正。

【问题讨论】：

angularjs 在默认选择选项stackoverflow.com/questions/23686118/…时不一致@
有类似的问题吗？数字：0？通过将模型的默认值设置为字符串而不是 int 来修复，例如 mymodel = "0" 而不是 mymodel = 0;

标签： angularjs

【解决方案1】：

2017 年 3 月 29 日更新：

正如 Jorge Rodrigues dos Santos 所说，对于新版本的 Angular，这应该以不同的方式处理。以下摘自 angular 1.6.3 的当前文档

（可选）单个硬编码元素，其值已设置为空字符串，可以嵌套到元素中。这然后元素将表示 null 或“未选择”选项。看下面的示例进行演示。

https://docs.angularjs.org/api/ng/directive/select

Angular 正在创建一个新选项来表示空值。它没有找到您在 HTML 中提供的选项之一。

要绑定到 null，请在第一个选项上设置 value="null"

<option value="null"></option>

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

【讨论】：

哈哈。哇。说真的，我阅读了文档并且可以发誓他们说要使用<option></option>。好电话，解决得很好。很快就会标记为答案。
似乎不适用于更新的 Angular 版本
我不认为这是答案。实际值为"null" 而不是null
@kazupooot 这个帖子已经超过 3 年了......但我相信对于当时的角度版本（1.2.16），一个空模型值会导致选择元素最初具有该值的选项设置为"null" 被选中。那时我认为模型的价值仍然是null。这就是操作所要求的。如果用户选择了另一个选项，然后重新选择了第一个选项，则该值将设置为 "null"，如您所述。
始终小心选择和值与 ng-value：字符串表示（或标识符）与真实对象

【解决方案2】：

接受的答案对我不起作用，因为我的属性可能为空白、null 或未定义。如果您使用的是 1.3+ 版本，则可以使用 getterSetter 将值强制为空白。

我正在处理字符串值。您还必须在函数中处理 0 或其他有效的假值。

$scope.nullableIntCoerced = function(n) {
    return arguments.length ? ($scope.nullableInt = n) : ($scope.nullableInt || "");
}

<select ng-model="nullableIntCoerced" ng-model-options="{getterSetter:true}">
    <option value=""></option>
    ...

https://code.angularjs.org/1.3.20/docs/api/ng/directive/ngModel

【讨论】：

【解决方案3】：

对于 Angularjs 的更新版本，使用 <option value=""> - </option> 作为空值

【讨论】：

【解决方案4】：

以下解决方案为我解决了问题。

这里的问题是，当使用 ng-model 时，它会添加一个默认选项，其值为 "?"如果不使用 ng-model，就无法使用 ng-change 来获取当前选择。我实际上已经创建了一个 onChangeSelection()，我们可以在其中设置下面类似的 defaultSelected 属性

$scope.onChangeSelection = function(id) {

    document.getElementById(id)[0].defaultSelected = true;
    $scope.selected = $('#'+id).val();
}

<select id="mySelect" ng-model="nullableInt" ng-options="option.value as option.text for option in arrayContents track by option.value"                    ng-change="{{onChangeSelection(id)}}" required>
    <option value="" ng-if="false"></option>
</select>

这将从选项列表中排除默认选项，并将第一个值设为 defaultSelected。

【讨论】：

对不起，如果这是唯一的解决方案，我永远不会使用组件选择。对于单个选择组件来说太复杂了。