AngularJS ui-select下拉框无法显示model绑定的选中值如何解决

问题根因 #

这个问题核心是两个常见原因：一是下拉选项数据groupList异步加载的时序晚于model赋值时序，二是ng-options默认的对象引用匹配规则和你存储的model值不匹配。

修复步骤 #

• 调整数据赋值时序
  确保你给screenList.approvalGrp赋值的操作，放在loadApprovalGroups()接口请求成功、groupList已经完成赋值之后执行，避免ui-select2初始化时找不到匹配的选项值。
• 修改ng-options匹配规则
  默认ng-options按照对象引用匹配，如果你存储的approvalGrp中的对象和groupList中的对象不是同一个内存引用（哪怕属性值完全一致），也会匹配失败。新增track by指定唯一主键匹配，修改后的ng-options属性为：
  ng-options="group.groupName for group in groupList track by group.id"
  把上面的group.id替换为你实际业务中分组的唯一主键字段即可。
• 校验多选值格式
  你开启了multiple多选属性，screenList.approvalGrp必须为数组类型，初始化时先赋值为空数组：$scope.screenList.approvalGrp = []，避免非数组格式导致的匹配失效。
• 兼容兜底方案
  如果上述步骤修复后仍存在渲染问题，可以在groupList和approvalGrp都赋值完成后，手动触发select2的更新事件，代码示例：

  // 注入$timeout服务后执行
  $timeout(function() {
    angular.element('#category').trigger('change');
  }, 0);
  

修改后的完整HTML代码 #

<div class="col-sm-8 categoryWrapper">
    <select ui-select2="{minimumResultsForSearch:10}" ng-model="screenList.approvalGrp"
        multiple data-placeholder="*Category" class="form-control" id="category" required
        ng-init="loadApprovalGroups()" ng-options="group.groupName for group in groupList track by group.id">
        <option value=""></option>
    </select>
    {{screenList.approvalGrp}}
</div>

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