予め選択された角度データがSelect2に表示されません複数の選択メニュー

Question

私はSelect2（4.0.3）と角度（1.4.9）を使用するプロジェクトを持っています。 Angularコントローラと双方向データバインディングを使用するフォームの1つは、多くのサイトを含む連絡先モデルとサーバーから利用可能なサイトの一覧を読み込みます。このデータはコントローラのプロパティである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

私は、select要素に直接NG-オプションを追加し、完全に明示的なオプションの要素を削除することで、これを解決：

<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>