Preselected Angular 数据未显示在 Select2 multiple select 菜单中

Question

我有一个使用 Select2 (4.0.3) 和 Angular (1.4.9) 的项目。其中一个表单使用 Angular 控制器和双向数据绑定，加载一个联系人模型，其中包含许多站点以及来自服务器的可用站点列表。此数据分别添加到 contact 对象和 sites 数组中，它们是控制器的属性。我已经实现了一个 Select2 multiple select，它允许用户更新属于联系人的站点列表。

<select 
    name="sites"
    class="form-control m-b js-example-basic-multiple site-select"
    multiple="multiple"
    data-placeholder="Select Sites"
    ng-model="contact.sites">
    <option 
        ng-repeat="site in sites" 
        ng-bind="site.name" 
        value="{{ site.id }}">
    </option>
</select>

此实现的问题在于，它在首次加载数据时不显示已属于联系人的网站。

在从服务器获取数据之前，select 元素变成了 Select2，$(".site-select").select2();。

将 Angular 和 Select2 集成在一起以解决此问题的最佳方法是什么？

Answer 1

我通过将 ng-options 直接添加到 select 元素并完全删除显式选项元素来解决此问题：

<select 
    name="sites"
    class="form-control m-b js-example-basic-multiple site-select"
    multiple="multiple"
    data-placeholder="Select Sites"
    ng-model="contact.sites"
    ng-options="
        site as site.name 
        for site in sites 
        track by site.id
    ">
</select>

Preselected Angular 数据未显示在 Select2 multiple select 菜单中

Preselected Angular data does not show up in Select2 multiple select menu

angularjs

select2