AngularJS下拉选框选中值变为null问题排查与解决求助

我之前也踩过AngularJS下拉框绑定的类似坑，帮你拆解下问题根源和解决办法：

问题根源 #

从你贴的代码来看，主要有几个点导致了这个异常：

1. 无效的type="number"属性：<select>标签本身不支持type属性，这个多余的属性会干扰AngularJS对表单控件的模型绑定逻辑，导致值解析异常。
2. 未闭合且配置错误的空option：你的空option标签没有闭合，而且selected="false"的设置毫无意义——当AngularJS初始化时，如果selectedPage的初始值不在pages数组里，它会自动选中这个空option，而空option的value=""是字符串类型，和pages数组里的数字类型不匹配，直接导致selectedPage被重置为null。
3. 模型初始值不匹配：如果你的selectedPage初始值是undefined或null，而pages是数字数组，AngularJS无法找到匹配的选项，就会选中空option，进而触发模型值变为null，再通过ng-change触发额外请求。

解决步骤 #

按照下面的调整逐一修复：

1. 移除无效属性：删掉<select>上的type="number"，select控件不需要这个属性。
2. 修复空option标签：如果需要默认占位选项，正确配置并闭合它；如果不需要，直接删掉这个空option（毕竟页码选择默认选中第一页更合理）。
   • 保留占位选项的写法：

     <option value="" disabled selected hidden>请选择页码</option>
     

   • 或者直接移除，让AngularJS自动匹配初始值。
3. 统一模型与选项的类型：在控制器里给selectedPage设置初始值，确保它是pages数组中存在的数字类型，比如：

   $scope.pages = [1,2,3,4,5];
   $scope.selectedPage = $scope.pages[0]; // 初始选中第一页
   

4. 添加防空判断：在selectchange方法里先判断值是否有效，避免无效请求：

   $scope.selectchange = function(page) {
     if (page !== null && page !== undefined) {
       // 这里发起你的请求逻辑
     }
   };
   

修改后的完整HTML示例 #

<select class="footer" id="chooser" ng-change="selectchange(selectedPage)" ng-model="selectedPage" ng-options="x for x in pages">
  <option value="" disabled selected hidden>请选择页码</option>
</select>

这样调整后，下拉框的模型绑定就会正常工作，不会再出现选中值变为null的情况，额外的Angular请求也会被避免。

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