AngularJSを使用しているときにSelectpickerが塗りつぶされない

Question

選択オプション（selectpicker）を入力しようとしていますが、成功しません。私のcompetenceArrayは正しく埋められていますが、HTMLにはオプションが表示されません。

誰かがselectpickerで私を助けることができますか？

JS

(() => { 
    angular 
    .module('talent') 
    .controller('FunctionalityCreateCtrl', Create); 

    function Create($timeout, GatewayService) { 
    const vm = this; 
    vm.form = {}; 
    vm.competencesArray = []; 

    getCompetences(); 

    function getCompetences() { 
     GatewayService.get('/competences') 
     .then((data) => { 
      vm.competencesArray = data._embedded; 
     }) 
     .catch(() => { 
      console.log('nope'); 
     }); 
    } 
    } 
})(); 

HTML

<select 
    class="selectpicker"      
    data-style="select-with-transition" 
    title="Select a value" 
    data-size="7" 
    ng-model="functionality.form.comp" 
    ng-options="s.name for s in functionality.competencesArray"> 
<option value=""> Select</option>      
<select> 

Answer 1

ajaxリクエストの完了後、選択ピッカーを更新する必要があります。ドキュメントから：

は、プログラムで最初に 新しい状態に合わせて、UIを更新するために、リフレッシュ方法を使用して、選択 を操作し、JavaScriptを使用して選択を更新します。これは、オプションを削除または追加するとき、または JavaScriptを使用して選択を無効または有効にするときに必要です。

ajaxリクエストが完了したら、リフレッシュ選択が必要です。それを角度再レンダリングdomの$ timeoutに入れてください。次に例を示します。

function getCompetences() { 
    GatewayService.get('/competences') 
    .then((data) => { 
     vm.competencesArray = data._embedded; 
    $timeout(function(){ 
    $('.selectpicker').selectpicker('refresh'); //put it in timeout for run digest cycle 
    },1) 
    }) 
    .catch(() => { 
     console.log('nope'); 
    }); 
} 

は、それが

を助けるホープ

Answer 2

私はあなたが角度モジュール "才能" を定義していることを仮定しているので、あなたのコードの完全なコンテキストを投稿していません要素がFunctionalityCreateCtrlの範囲内にあることを確認します。私はng-appとng-controllerの属性を持つdivにあなたのサンプルHTMLをラップしました。その例は機能的です。

投稿したコード例の最初のエラーは、要素が正しく閉じられていないことです。閉じるタグにスラッシュがありません：</select>。

他のエラーは、select要素のモデルをform.compに設定していますが、form.compは何も設定されていないようです。私は、以下のコード例でそれを追加しました。

ng-options式ng-options="s.id as s.name for s in functionality.competencesArray">にidを追加したことにも気づく。これは私が知っている値にモデル（form.comp）を設定することができるためです。あなたのデータは異なるかもしれません。

HTMLワーキングスニペット：

<div ng-app="talent" ng-controller="FunctionalityCreateCtrl as functionality"> 
    <select 
    class="selectpicker"      
    data-style="select-with-transition" 
    title="Select a value" 
    data-size="7" 
    ng-model="functionality.form.comp" 
    ng-options="s.id as s.name for s in functionality.competencesArray"> 
    <option value=""> Select</option>      
    </select> 
</div> 

作業のJavaScriptスニペット（私は才能モジュールの定義を追加し、例が機能しているだけのように、API呼び出しを削除しました）：ここで

(() => { 
    angular.module('talent', []); 

    angular 
    .module('talent') 
    .controller('FunctionalityCreateCtrl', Create); 

    function Create() { 
    const vm = this; 
    vm.form = {}; 
    vm.competencesArray = []; 

    getCompetences(); 

    function getCompetences() { 
     vm.competencesArray = [ 
     { id: 1, name: 'test 1' }, 
     { id: 2, name: 'test 2' }, 
     { id: 3, name: 'test 3' } 
     ]; 

     vm.form.comp = 1; 
    } 
    } 
})(); 

ですがhttps://jsfiddle.net/g8r9ajtL/