AngularJS中如何禁用select控件的空白默认选项？

我太懂这种困扰了——明明按逻辑生成了选项，却凭空冒出来个空白项，就算隐藏了心里还是不踏实，就想彻底把它禁用掉对吧？咱们来拆解问题，给你几个靠谱的解决方案：

问题根源 #

AngularJS里的<select>搭配ng-options时，只要ng-model的初始值不在ng-options的选项集合里，就会自动生成一个空白选项。你的代码里应该是$scope.selectedPage一开始没赋值，或者赋值不在pages数组中，所以才会出现这个烦人的空白项。

方案1：彻底消除空白选项（最推荐） #

直接初始化ng-model的值，让它默认匹配pages数组里的第一个选项，这样AngularJS就不会生成空白项了。修改你的JavaScript代码：

for (var i = 1; i<=response.data.pages; i++) { 
  $scope.pages.push(i); 
}
// 初始化选中第一个页码，消除空白选项
$scope.selectedPage = $scope.pages[0];

这样页面加载后，下拉框会默认选中第一个数字选项，完全不会出现空白项，自然也不用考虑禁用的问题。

方案2：保留默认提示并禁用（如果需要提示文本） #

如果你想保留一个类似“请选择页码”的默认提示项，同时禁用它不让用户选择，可以放弃ng-options，改用ng-repeat手动生成选项，同时添加一个禁用的默认项：

<select ng-change="loadHomePage()" ng-model="selectedPage">
  <!-- 禁用的默认提示项，默认选中 -->
  <option value="" disabled selected>请选择页码</option>
  <!-- 循环生成数字选项 -->
  <option ng-repeat="x in pages" value="{{x}}">{{x}}</option>
</select>

同时在JavaScript里初始化selectedPage为空字符串，确保默认选中这个禁用的提示项：

$scope.selectedPage = "";
for (var i = 1; i<=response.data.pages; i++) { 
  $scope.pages.push(i); 
}

这样用户既看不到空白项，也无法选中这个提示项，只能选择有效的数字页码。

为什么之前的隐藏方法没用？ #

你之前尝试添加<option value="" hidden...>的方式，只是视觉上隐藏了自动生成的空白项，但它本质上还是存在于DOM中，用户通过键盘操作（比如上下箭头）依然可能选中它。只有从根源上让ng-model匹配有效选项，或者手动替换成禁用的提示项，才能彻底解决问题。

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