AngularJS中HTML Select控件默认未选中首个选项的问题求助

嘿，我碰到过类似的AngularJS下拉绑定坑，直接加selected根本顶不住框架的绑定逻辑，乱改控制器还容易牵连其他控件。给你梳理下问题根源和靠谱的解决步骤：

1. 先把formAdata对象初始化！ #

这是很多人忽略的关键细节：如果你的$scope.formAdata一开始没声明，直接给它的属性赋值（比如$scope.formAdata.eventtype2），AngularJS会因为对象未定义触发绑定异常，甚至间接影响其他动态下拉的初始化。

在控制器最开头加上这段代码：

app.controller('AppController', function($scope, $http) {
  // 提前初始化表单数据容器，避免undefined引发的绑定问题
  $scope.formAdata = {};
  
  // 下面放你的其他控制器代码...
});

2. 正确设置静态下拉的默认值 #

之前你直接在控制器顶部赋值的方式，因为formAdata未初始化等于白忙活。现在初始化完成后，有两种稳妥的设置方式：

选项A：直接在控制器初始化时设置（适合静态下拉，无需等待动态数据） #

app.controller('AppController', function($scope, $http) {
  $scope.formAdata = {};
  // 给静态下拉绑定的模型赋值，AngularJS会自动匹配对应选项
  $scope.formAdata.eventtype2 = 'ordinaryevent';
  
  // 你的init函数、createEvents函数...
});

选项B：等动态数据加载完成后再设置（彻底避免和动态下拉冲突） #

如果担心和Node.js填充的eventtype1下拉产生冲突，把默认值设置放到init函数的成功回调里：

$scope.init = function () {
  $http({
    url: "/populateFields",
    method: "GET"
  }).success(function(response) {
    $scope.businessSteps = response.businessStep;
    $scope.eventType = response.eventType;
    // 动态数据加载完成后再设置静态下拉默认值，确保不会干扰其他控件
    $scope.formAdata.eventtype2 = 'ordinaryevent';
  }).error(function(error) {
    console.log(error);
  });
};

3. 删掉<option>上的selected属性！ #

AngularJS的ng-model完全掌控下拉框的选中状态，你手动加的selected会被框架覆盖，所以静态下拉的HTML改成这样：

<div class="col-md-4">
  <select id="eventtype2" ng-model="formAdata.eventtype2" class="form-control">
    <option class="dropdown-item" value="ordinaryevent">Ordinary Event</option>
    <option class="dropdown-item" value="errordeclaration"> Error Declaration </option>
  </select>
</div>

额外优化：修复动态下拉eventtype1的冗余代码 #

你现在的eventtype1同时用了ng-options和手动写的<option>，会导致生成重复选项。建议统一用ng-options，提示选项这么写就够了：

<select id="eventtype1" ng-model="formAdata.eventtype1" class="form-control" 
        ng-options='type for type in eventType'>
  <option value="" disabled>Select Event Type</option>
</select>

这样默认会显示提示文本，直到用户选择或者你通过代码给formAdata.eventtype1赋值。

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