AngularJS(<1.4)中select空白选项自动选中下一项的解决方法咨询

方案一：彻底消除空白选项 #

AngularJS <1.4中用ng-repeat渲染select选项时出现空白，核心原因是**ng-model绑定的值不在选项列表中**，或是ng-repeat生成option的兼容性问题。可以通过以下两种方式解决：

1. 初始化模型值匹配默认选项 #

确保orderList中每个orderTask的name初始值为""，对应默认提示选项的value：

// 控制器中初始化orderList
$scope.orderList = $scope.orderList.map(function(item) {
  return angular.extend(item, { name: "" });
});
// 新增任务项时也直接将name设为""

这样Angular会匹配到<option value="" disabled>Select an option</option>，不会生成额外空白选项。

2. 改用ng-options指令（更可靠） #

ng-options是Angular专为select组件设计的指令，比ng-repeat更稳定，能从根源避免空白问题。修改后的select代码：

<select class="form-control" name="tasksList"
        id="tasksList" ng-model="orderTask.name"
        ng-change="onTaskValueChange(orderTask.name, $index)"
        style="width:80%"
        ng-options="task.name as task.name disable when taskIsDisabled(task.name) for task in allTasks">
  <option value="" disabled>Select an option</option>
</select>

这里通过disable when直接集成禁用逻辑，无需手动遍历生成option，同时彻底消除空白选项。

方案二：点击空白选项时不自动选中其他选项 #

如果必须保留ng-repeat，可以在ng-change回调中校验选中值，无效时重置模型：

修改控制器中的onTaskValueChange函数 #

$scope.onTaskValueChange = function(selectedName, index) {
  // 校验选中值是否为有效且未禁用的任务
  var isValid = $scope.allTasks.some(function(task) {
    return task.name === selectedName && !$scope.taskIsDisabled(task.name);
  });

  // 若为空白或无效值，重置为空状态
  if (!isValid) {
    $scope.orderList[index].name = "";
  }
};

当用户选择空白选项时，模型会被重置为""，不会自动跳转到下一个可用选项。

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