Angular 1中select列表选中状态异常问题求助

我来帮你拆解一下你遇到的两个问题，以及对应的解决办法：

问题原因分析 #

1. 初始代码下拉框为空的原因 #

你设置了ng-selected="selected"，但你的$scope里并没有定义selected这个变量，所以这个选中条件根本不生效。再加上formData.sex初始没有赋值，AngularJS无法匹配到对应的选中项，所以下拉框显示为空。

2. 用selected="selected"后提交值丢失的原因 #

AngularJS的表单是基于双向数据绑定工作的，手动设置DOM的selected属性只是修改了界面显示，但并没有同步更新到ng-model绑定的formData.sex变量上。当你提交表单时，Angular会读取formData.sex的值，而这个值依然是空的，所以就出现了“显示选中但提交丢失”的情况。

正确解决办法 #

AngularJS中控制select选中的核心是通过ng-model绑定的值来匹配option的value，不需要手动用ng-selected或selected属性。我们只需要根据auto变量初始化formData.sex的值即可。

步骤1：在控制器中初始化选中值 #

先确保formData对象已初始化，然后根据auto的值设置formData.sex的默认值：

$scope.auto = "6";
// 先初始化formData对象，避免undefined问题
$scope.formData = {};

// 根据auto变量设置默认选中的性别值
if ($scope.auto === "6") {
  $scope.formData.sex = "Female";
} else if ($scope.auto === "1") {
  $scope.formData.sex = "Male";
}

步骤2：修改HTML模板 #

去掉ng-selected和selected属性，保留ng-if来控制选项的显示（如果你的需求是根据auto只显示对应选项的话）：

<div class="form-group" ng-class="{ 'has-error' : errorsex }">
  <select id="sex" name="sex" class="selector form-control" ng-model="formData.sex" required="required">
    <option value="Female" ng-if="auto == 6">Female</option>
    <option value="Male" ng-if="auto == 1">Male</option>
  </select>
  <span class="errorba" ng-show="formData.errorName">{{ formData.errorsex }}</span>
</div>

进阶优化：用ng-options生成选项（更符合Angular风格） #

如果后续选项可能扩展，建议把选项数据放在控制器中，用ng-options动态生成，代码更易维护：

控制器代码

$scope.auto = "6";
$scope.formData = {};

// 根据auto筛选可显示的选项
$scope.sexOptions = [];
if ($scope.auto === "6") {
  $scope.sexOptions.push({ value: "Female", label: "Female" });
} else if ($scope.auto === "1") {
  $scope.sexOptions.push({ value: "Male", label: "Male" });
}

// 设置默认选中第一个选项
$scope.formData.sex = $scope.sexOptions[0]?.value;

HTML代码

<div class="form-group" ng-class="{ 'has-error' : errorsex }">
  <select id="sex" name="sex" class="selector form-control" 
          ng-model="formData.sex" required="required"
          ng-options="option.value as option.label for option in sexOptions">
  </select>
  <span class="errorba" ng-show="formData.errorName">{{ formData.errorsex }}</span>
</div>

这样修改后，下拉框会自动选中对应的值，而且formData.sex会和选中值同步，提交表单时就能正常获取到选中的性别值了。

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