AngularJS 1.6.6中ng-selected失效问题求助

看起来你踩了Angular下拉框默认选中的常见坑——ng-selected明明写对了逻辑却完全不生效，我来给你梳理几个最可能的原因和落地的解决办法：

1. 别搞混ng-selected和ng-model的优先级 #

Angular的下拉框选中状态优先由ng-model绑定的值决定，哪怕你给某个option硬写ng-selected="true"，如果ng-model的值和这个option的value不匹配，它也不会被选中。

所以第一步：确认你的<select>标签绑定了正确的ng-model，并且这个model的值和你想要默认选中的item.codUser完全一致（你已经确认是字符串类型，这点很好，还要注意有没有大小写、空格这类容易忽略的隐形差异）。

2. 检查option的value是否正确渲染 #

如果是用ng-repeat生成选项，一定要确保value属性渲染的是你期望的字符串值。比如：

<!-- 正确写法：value绑定item.codUser的字符串值 -->
<select ng-model="selectedUser">
  <option ng-repeat="item in userOptions" value="{{item.codUser}}">{{item.userName}}</option>
</select>

然后在控制器里直接给ng-model赋值：

// 数据加载完成后设置默认值
$scope.selectedUser = 'MM';

这种情况下，ng-selected其实是多余的——只要ng-model的值和option的value匹配，对应的选项会自动被选中。

3. 如果用ng-options，完全不需要ng-selected #

如果你是用ng-options生成下拉选项，Angular会自动处理选中逻辑，这时候加ng-selected反而会产生冲突。正确的做法是直接控制ng-model：

<select ng-model="selectedUser" 
        ng-options="item.codUser as item.userName for item in userOptions">
</select>

控制器里同样设置$scope.selectedUser = 'MM';即可，Angular会自动匹配对应的选项。

4. 排查数据加载的时机问题 #

如果你的下拉选项是异步从数据库获取的（比如通过API请求），那可能你设置默认值的时候，userOptions还没加载完成，这时候ng-model的赋值会因为没有对应的选项而失效。

解决办法是在数据加载完成后再设置默认值，比如在API的回调里：

// 模拟异步获取用户选项
UserService.getUsers().then(function(response) {
  $scope.userOptions = response.data;
  // 数据加载完成后再赋值
  $scope.selectedUser = 'MM';
});

5. 强制触发视图更新（极端情况） #

如果以上都没问题，但还是不生效，可能是Angular的 digest 循环没触发（比如在非Angular的异步回调里操作了scope）。这时候可以尝试手动触发：

$scope.$apply(function() {
  $scope.selectedUser = 'MM';
});

（注：看你用ng-selected应该是AngularJS 1.x，Angular 2+的话用ChangeDetectorRef.detectChanges()）

总结一下：ng-selected其实很少需要用到，绝大多数情况下，只要正确绑定ng-model并确保其值与选项的value匹配，就能实现默认选中。你之前直接写ng-selected="item.codUser =='MM'"不生效，大概率是因为ng-model的值没对应上，或者数据加载时机不对。

内容的提问来源于stack exchange，提问作者Miguel-Ángel