Angular下拉框ng-selected选项失效：选中项不显示问题求助

我来帮你搞定这个Angular老版本里的下拉框选中显示问题~ 咱们先看看问题出在哪，再一步步解决：

问题根源 #

1. 类型不匹配：你控制器里的selectedItemvalue是数组["C"]，但选项循环里的sel是单个字符串"C"，用==比较的时候，数组和字符串永远不相等，所以ng-selected的条件根本不会触发。
2. 指令兼容性：在Angular 1.0.7这种早期版本里，用ng-repeat生成<option>再搭配ng-selected很容易出现绑定时序问题——有时候ng-model的赋值会晚于ng-selected的判断，导致选中状态没被正确设置。官方其实更推荐用ng-options来处理下拉框的选项绑定，它能和ng-model更好地联动。

最优解决方案：改用ng-options #

这是最稳妥的方式，既能解决选中问题，代码也更简洁：

修改后的HTML代码 #

<select ng-model="selectedItemvalue" ng-options="sel as sel for sel in selectables">
  <option value="">--Select --</option>
</select>

修改后的控制器代码 #

$scope.selectables = ["A","B","C"];
$scope.selectedItemvalue = "C"; // 把数组改成字符串，和选项值类型统一

为什么这样改？

• ng-options是Angular专门为下拉框设计的指令，会自动处理选项的选中状态，不需要手动写ng-selected，它会自动匹配ng-model的值。
• 把selectedItemvalue改成字符串后，和选项里的sel类型一致，就能正确触发选中匹配了。

备选方案：修复ng-repeat+ng-selected的写法 #

如果你一定要保留ng-repeat的写法，那需要做两个调整：

修改后的HTML代码 #

<select ng-model="selectedItemvalue"> 
  <option value="">--Select --</option> 
  <option ng-repeat="sel in selectables" ng-selected="selectedItemvalue === sel" value="{{sel}}">{{sel}}</option> 
</select>

修改后的控制器代码 #

$scope.selectables = ["A","B","C"];
$scope.selectedItemvalue = "C"; // 同样要把数组改成字符串

注意点

这里把==换成===是更严谨的全等比较，避免类型转换带来的意外问题。不过还是要提醒你，在Angular 1.0.7里，这种写法依然可能因为渲染时序问题偶尔出bug，所以优先推荐用ng-options。

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