使用ng-value的select选中值后空选项消失问题排查

我来帮你分析下这个问题——在AngularJS里用ng-repeat渲染<select>选项时，手动添加的空选项选中其他值后就消失，大概率和ngModel绑定逻辑、空选项的添加方式或者数据同步时机有关，给你几个排查和解决的方向：

1. 检查ngModel的初始值匹配度 #

AngularJS的<select>会严格根据ngModel的值匹配选项。如果你手动添加的是空字符串''，但ngModel的初始值是undefined/null，当你选中其他值后再切回空选项时，会因为值不匹配导致空选项被“忽略”。建议把ngModel初始值设为空字符串，和你添加的空选项值保持一致：

// 初始化绑定的变量
$scope.selectedUnidade = '';

另外要注意：你是添加了空格' '还是空字符串''？如果两者不匹配，也会出现“空选项消失”的错觉（其实是ngModel找不到对应的选项）。

2. 换一种更稳定的空选项添加方式 #

手动往数组里push空选项容易受数组渲染时机、异步操作的影响，不如直接在<select>里单独写一个固定的空选项，放在ng-repeat选项的前面：

<select ng-model="selectedUnidade">
  <option value="">请选择</option>
  <option ng-repeat="unidade in unidadespeso" value="{{unidade}}">{{unidade}}</option>
</select>

这种方式的空选项是独立存在的，不会受数组变化或ngModel状态的影响，稳定性更高。

3. 确认数组修改的时机与作用域 #

如果你一定要通过修改数组添加空选项，要确保操作在AngularJS的 digest 周期内执行，且时机正确：

• 比如在异步获取数组数据后添加，要放在回调里；
• 推荐用unshift把空选项放在数组开头（更符合选择器的交互逻辑），而不是push放在末尾：

// 示例：异步获取数据后添加空选项
$http.get('/your-api-path').then(function(res) {
  $scope.unidadespeso = res.data;
  // 把空选项插入到数组最前面
  $scope.unidadespeso.unshift('');
});

4. 改用ng-options替代ng-repeat（更推荐） #

AngularJS官方更推荐用ng-options渲染<select>，它的逻辑更贴合Angular的表单绑定机制，能避免很多ng-repeat带来的奇怪问题。搭配固定空选项使用，几乎不会出现空选项消失的情况：

<select ng-model="selectedUnidade" ng-options="unidade for unidade in unidadespeso">
  <option value="">请选择</option>
</select>

内容的提问来源于stack exchange，提问作者Daniel Bezerra De Menezes