Angular模态窗口中Select组件失效问题排查

我帮你分析下问题所在，你这个情况大概率是select选项的绑定方式不对，尤其是在模态窗口这种有独立作用域的环境下，AngularJS没法正确匹配选中项和ngModel的值。

问题根源 #

你用ng-repeat渲染<option>时，没有给每个选项绑定对应的user对象值——默认情况下，option的value会变成显示的文本字符串，而你的modalInstance.form.correspondent绑定的是对象，类型不匹配自然选不上。模态窗口外可能因为作用域继承的巧合暂时正常，但这不是正确的写法。

两种修复方案 #

方案1：用ng-options替代ng-repeat（官方推荐）

ng-options是AngularJS专门为select组件设计的指令，能更高效地处理对象绑定，避免手动处理value的麻烦：

<select ng-model="modalInstance.form.correspondent" 
        class="form-control" 
        id="correspondent" 
        name="correspondent"
        ng-options="user as (user.secondName + ' ' + user.firstName + ' ' + user.middleName) for user in demoApp.users">
  <option value="">-- 选择联系人 --</option> <!-- 可选的默认占位选项 -->
</select>

语法说明：user as 显示文本 for user in 数据源，前面的user就是会绑定到modalInstance.form.correspondent的对象，完美匹配你的需求。

方案2：给ng-repeat的option添加ng-value（如果坚持用ng-repeat）

如果不想换指令，只要给每个option绑定对应的user对象即可：

<select ng-model="modalInstance.form.correspondent" 
        class="form-control" 
        id="correspondent" 
        name="correspondent">
  <option ng-repeat="user in demoApp.users" ng-value="user">
    {{user.secondName}} {{user.firstName}} {{user.middleName}}
  </option>
  <option value="lol">lol</option> <!-- 固定字符串选项直接用value -->
</select>

ng-value会把user对象正确绑定到option的value上，让AngularJS能通过对象引用匹配选中项。

额外注意点 #

• 确保modalInstance.form.correspondent的初始值是demoApp.users数组里的现有对象引用，而不是新创建的对象或字符串，AngularJS是通过引用匹配对象的。
• 检查模态窗口的作用域：如果用的是UI Bootstrap的$uibModal这类组件，要确保demoApp.users能在模态窗口的作用域中访问到——最好通过resolve把users数据传递到模态窗口，避免作用域隔离导致的数组无法读取问题。

内容的提问来源于stack exchange，提问作者Александр Перепечаев