Angular下拉框默认选中异常及选择后恢复默认值的实现咨询

看来你遇到的问题主要出在模型命名冲突和Angular上下文外的模型更新这两个点上，我来一步步帮你搞定：

1. 先解决默认显示空白的问题 #

你的代码里有个关键的小错误：ng-model="field" 和 ng-repeat="x in field" 使用了同一个变量名！field 是你的数据源数组，而ng-model需要绑定到一个单独的字符串变量来存储选中值，这种命名冲突会让Angular无法正确识别默认选中项。

修改步骤： #

• 把ng-model的变量名改成和数据源不同的，比如 selectedField
• 在控制器里初始化这个变量为空字符串：$scope.selectedField = '';，这样默认就会匹配value=""的选项，显示"Choose field"

2. 实现选中后自动恢复到“Choose field” #

原来的onchange是原生JS事件，直接在里面修改Angular模型可能不会触发视图更新，建议换成Angular自带的ng-change指令，这样能在Angular的 digest 周期内处理逻辑，避免手动触发更新的麻烦。

修改后的完整代码： #

<div class="form-group alert_txt col-lg-6">
  <label class="form_lable">Field</label><br>
  <select class="form-control" 
          ng-change="handleFieldSelection('rteSample', selectedField)" 
          ng-model="selectedField">
    <option value="" selected>Choose field</option>
    <option ng-repeat="x in field track by x.fieldSymbol" 
            value="{{x.fieldSymbol}}">
      {{x.fieldName}}
    </option>
  </select>
</div>

控制器里添加处理函数： #

// 假设这是你的控制器代码
app.controller('YourController', function($scope) {
  // 初始化选中值为空，对应默认选项
  $scope.selectedField = '';

  // 处理下拉框选中事件
  $scope.handleFieldSelection = function(rteId, selectedValue) {
    // 先执行原来funct1的逻辑
    funct1(rteId, selectedValue);
    
    // 重置选中值为默认选项
    $scope.selectedField = '';
  };
});

额外小提示： #

• 给ng-repeat加上track by x.fieldSymbol可以避免当字段有重复值时Angular报错，是个实用的好习惯
• 尽量避免混用原生onchange和Angular的ng-change，用Angular的指令处理视图和模型的交互，能减少很多奇怪的更新问题
• 如果实在要保留原生onchange，那在修改$scope.selectedField后需要手动调用$scope.$apply()来触发视图更新，但还是推荐用ng-change更简洁

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