AngularJS中静态选项select的ng-selected失效问题排查

嘿，我来帮你排查下问题所在，其实你的代码有两个关键错误，还有更简单的标准做法可以用：

问题分析 #

• 指令位置错误：ng-selected是用来控制单个<option>是否选中的指令，你把它放在了<select>标签上，这完全起不了作用
• 语法错误：你写的ng-selected=="Male"多了一个等号，正确的语法应该是ng-selected="表达式"（比如判断当前ng-model的值是否等于选项值）

两种解决方案 #

方案1：修正ng-selected的使用（适合静态选项场景） #

把ng-selected加到对应的<option>上，同时确保控制器里给ng-model绑定的变量设置初始值：

<select name="gender" id="gender" data-ng-model="gender">
  <option value="">Select Gender</option>
  <option value="Male" ng-selected="gender === 'Male'">Male</option>
  <option value="Female">Female</option>
</select>

在你的控制器中添加初始值：

angular.module('yourAppModule', [])
.controller('yourController', function($scope) {
  // 设置默认选中Male
  $scope.gender = 'Male';
});

方案2：直接通过ng-model赋值（更推荐的AngularJS标准做法） #

其实完全不需要ng-selected，AngularJS的ng-model会自动匹配选项值，只要在控制器里给绑定的变量设置初始值即可：

<select name="gender" id="gender" data-ng-model="gender">
  <option value="">Select Gender</option>
  <option value="Male">Male</option>
  <option value="Female">Female</option>
</select>

控制器代码和方案1一样，只需要给$scope.gender赋值为'Male'，页面加载后就会自动选中对应的选项啦～

总结 #

AngularJS表单绑定的核心是ng-model，只要确保绑定的变量有正确的初始值，表单元素就会自动匹配对应的选项，这比手动用ng-selected要更符合框架的设计思路哦～

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