AngularJS下拉菜单选中项不显示问题求助

嘿，我来帮你排查这个AngularJS下拉菜单的问题——这种选中项在源码里有但浏览器不显示的情况，我碰到过好多次，大概率是这几个原因之一：

1. 选项未正确绑定或渲染 #

你只贴了<select>标签的代码，但没看到选项部分。如果你的选项是硬写的<option>却没和AngularJS数据源绑定，或者用了错误的指令生成选项，可能导致选项没被正确渲染到DOM里（或者渲染了但AngularJS没识别）。

比如正确的选项生成方式应该是用ng-repeat或者ng-options：

<!-- 用ng-repeat的写法 -->
<select class="form-control" ng-model="selectClass" ng-change="changed()" id="class" name="class">
  <option ng-repeat="cls in classList" value="{{cls.id}}">{{cls.className}}</option>
</select>

<!-- 更推荐的ng-options写法 -->
<select class="form-control" ng-model="selectClass" ng-change="changed()" id="class" name="class"
        ng-options="cls.id as cls.className for cls in classList">
</select>

如果你的选项是手动写死但没被AngularJS处理，或者数据源classList在控制器里没正确初始化，都会导致选项无法正常显示选中状态。

2. ng-model值与选项value的类型不匹配 #

AngularJS对ng-model和选项value的匹配是严格类型检查的，这是很多人踩坑的点。比如：

• 选项的value是字符串类型：<option value="1">一年级</option>
• 但你在控制器里初始化$scope.selectClass = 1（数字类型）

这时候AngularJS会认为两者不匹配，自然不会显示选中项。解决方法是把ng-model的初始值改成和选项value一致的类型：

// 控制器里改成字符串类型
$scope.selectClass = "1";

3. 手动添加的selected属性被AngularJS覆盖 #

如果你在<option>里手动加了selected属性，比如：

<option value="1" selected>一年级</option>

但同时用了ng-model，AngularJS会完全接管下拉菜单的选中状态，手动的selected会被忽略。正确的做法是在控制器里初始化ng-model的值来设置默认选中项，而不是依赖HTML的selected属性。

4. ng-model的初始值不在选项集合中 #

如果你的控制器里初始化的selectClass值，不存在于下拉菜单的选项value列表里，浏览器也不会显示选中项。比如选项只有"1"、"2"，但你设置$scope.selectClass = "3"，这时候没有匹配的选项，自然看不到选中状态。

5. 选项被条件渲染指令隐藏 #

如果你的选项是放在带有ng-if、ng-show或ng-hide的元素里，而这些指令的条件不满足，会导致选项根本没被渲染到DOM中，源码里可能能看到，但浏览器实际不会显示，更别说选中项了。比如：

<div ng-if="isLoaded">
  <option value="1">一年级</option>
</div>

如果isLoaded是false，这些选项就不会被渲染，自然看不到选中项。

快速排查步骤 #

1. 先检查浏览器控制台有没有AngularJS的报错（比如数据源未定义、指令使用错误）；
2. 确认选项是否正确渲染到DOM里（可以用浏览器开发者工具查看Elements面板）；
3. 核对ng-model的初始值和选项value的值和类型是否完全匹配；
4. 确保控制器里正确初始化了selectClass，并且值存在于选项集合中。

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