Angular项目中移除下拉列表首个空白项并设置默认选择文本

这个问题我之前做AngularJS项目时也碰到过，本质是AngularJS的ng-options在找不到与ng-model匹配的选项时，会自动生成一个空白选项。结合你给出的控制器代码，我给你两种简单有效的解决思路：

方法1：在API返回的选项列表前插入默认项 #

在加载完EnclosureList后，手动往数组最前面添加一个带默认文本的选项，同时让ng-model的值匹配这个默认项，这样就能直接选中默认文本，不会出现空白项。

修改你的loadEnclosure函数：

$scope.EnclosureModel = ""; 
loadEnclosure(); 

function loadEnclosure() { 
  $scope.loading = true; 
  var promise = ngservice.getClosureType(); 
  promise.then(function (resp) { 
    // 插入默认选项到列表开头，请根据你实际的选项字段调整（比如这里假设选项有id和name）
    $scope.EnclosureList = [{ id: "", name: "请选择机柜类型" }].concat(resp.data); 
    $scope.loading = false;
    // 确保ng-model和默认项的value匹配
    $scope.EnclosureModel = "";
  }).catch(function(error) {
    // 记得处理请求失败的情况
    $scope.loading = false;
    console.error("加载机柜类型失败：", error);
  });
}

对应的HTMLselect标签要和选项结构对应，示例：

<select ng-model="EnclosureModel" ng-options="item.id as item.name for item in EnclosureList" ng-disabled="loading">
</select>

方法2：手动添加默认选项（不修改原列表） #

如果你不想改动API返回的原始数据，可以直接在select标签里手动加一个默认选项，让它的value和ng-model初始值匹配：

HTML代码：

<select ng-model="EnclosureModel" ng-options="item.id as item.name for item in EnclosureList" ng-disabled="loading">
  <option value="">请选择机柜类型</option>
</select>

这种方式下，只要你的$scope.EnclosureModel初始值是空字符串""，页面加载后就会自动选中这个默认选项，不会出现AngularJS自动生成的空白项。

关键注意点 #

• 一定要保证默认选项的value和ng-model的初始值完全一致（比如都是空字符串""），否则还是会出现空白项。
• 如果你的选项结构不是id和name，记得把代码里的字段替换成你实际使用的字段（比如value和label）。

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