Angular ng-options新增选项自动选中异常问题求助

我之前也踩过Angular ng-options这个棘手的小坑，简直挠头！咱们一步步把它捋清楚解决掉。

你遇到的是视图与模型完全脱节的典型情况：明明模型值还是空的，下拉框却自动跳去选中新添加的选项。这本质上是浏览器默认选中行为和Angular渲染逻辑在空值处理上的冲突，再加上你用了静态的selected属性，没法跟着Angular的双向绑定同步更新状态。

解决方案：用动态绑定替代静态选中属性 #

直接上亲测有效的代码方案：

1. 重构下拉框结构

放弃静态的selected属性，改用ng-selected指令动态绑定模型值，让空选项的选中状态完全由模型控制：

<select ng-model="selectedValue" ng-options="item.value as item.label for item in dropdownOptions">
  <!-- 手动添加空选项，用ng-selected绑定模型空值 -->
  <option value="" ng-selected="selectedValue === ''">请选择</option>
</select>

2. 初始化控制器状态

确保模型初始值和空选项的value完全匹配（这里用空字符串，你也可以用null，但要保持一致）：

// 初始化模型为空字符串，和空选项的value严格匹配
$scope.selectedValue = '';
// 初始选项集合（可以是空的，后续动态添加）
$scope.dropdownOptions = [];

3. 添加新选项时保持模型状态

当你往选项集合里加新选项时，别碰selectedValue，让它老老实实保持为空就行：

$scope.addNewOption = function() {
  // 添加非空值的新选项
  $scope.dropdownOptions.push({
    value: 'new_opt_' + Date.now(),
    label: '新添加的选项'
  });
  // 极端情况下如果还是跑偏，手动强制模型为空（一般不需要）
  // $scope.selectedValue = '';
};

为啥之前的方法不行？ #

静态的selected属性只在页面第一次加载时生效一次，当Angular更新选项集合（比如你加了新选项），它会重新渲染下拉框，这时候浏览器会偷偷触发“选中第一个非空选项”的默认行为，而静态selected根本拦不住。换成ng-selected绑定模型后，Angular每次刷新都会检查模型值，只要模型是空的，就会强制把空选项设为选中，彻底解决视图和模型脱节的问题。

内容的提问来源于stack exchange，提问作者Bbit