ngHandsontableドロップダウンまたはオートコンプリートフィールドに動的データをロードする

Question

約束を返すサービスコールからngHandsontableドロップダウンおよびオートコレクトコントロールをロードしようとしています。静的データからこれらのコントロールを読み込むと正常に動作しますが、非同期呼び出しからロードしようとするとコントロールが空になります。

このplunker http://embed.plnkr.co/DQKBZK/には、うまく動作する1つのサンプルテーブルがあります。静的配列がロードされています。 2番目のテーブルは約束からテーブル行のデータを読み込むことができますが、このような方法でロードするためのドロップダウンまたはオートコンプリートコントロールを取得することはできません。私はあなたが提供できるアドバイスや提案を感謝します。コードスニペット：テンプレートに

、両方のテーブルに似て、これは動的一つである：

<hot-table datarows="dctrl.dynamicData" settings="dctrl.dynamicSettings"> 
    <hot-column type="text" title="'Id'" data="myid"></hot-column> 
    <hot-column source="dctrl.dynamicWeather" type="'dropdown'" title="'Weather'" data="weather"></hot-column> 
    <hot-column type="'autocomplete'" title="'Menu'" data="menu"> 
     <hot-autocomplete datarows="{{dctrl.dynamicMenu}}"></hot-autocomplete> 
    </hot-column> 
    </hot-table> 

コントローラは、サービスによって提供される静的なデータを用いて第1のテーブルとコントロールをロード：

vm.staticData = DemoService.staticData; 
vm.staticWeather = DemoService.staticWeather; 
vm.staticMenu = DemoService.staticMenu; 

staticData: [ 
    {"myid": "1", "weather": "Cloudy", "menu": "Cheese"}, 
    {"myid": "2", "weather": "Sunny", "menu": "Turnips"} 
    ], 
    staticWeather: ['Cloudy', 'Sunny', 'Rainy'], // dropdown 
    staticMenu: ['Beans', 'Cheese', 'Turnips'].join(','), // autocomplete 

動的DA：サービスによって提供

静的データ単純なJSONファイルによってサービスコールを介して提供されます。だから、天候ドロップダウンのために、我々はコントローラでこれを持っている：

vm.dynamicWeather = []; 

DemoService.getDynamicWeather() 
    .then(function successCallback(results) { 
    vm.dynamicWeather = results; 
    }); 

はここで動的な気象データは、サービスによって提供される方法は次のとおりです。

getDynamicWeather: function() { 
    var def = $q.defer(); 
    $http.get('weather.json') 
     .then(function successCallback(response) { 
     var i, responseArray = []; 
     for (i = 0; i < response.data.length; i++) { 
      responseArray.push(response.data[i].weather); 
     } 
     def.resolve(responseArray); 
     }); 
     return def.promise; 
    }, 

とJSONの気象データファイル：

[ 
    {"weather": "Cloudy"}, 
    {"weather": "Sunny"}, 
    {"weather": "Rainy"} 
] 

私はこれほど長い間、このことについてずっと悩んでいます。私が試したことは、$タイムアウト（ダイジェストサイクルをトリガする）、ハンドハンドのインスタンスの取得、レンダリングの強制、配列の代わりにオブジェクトを使うこと、関数呼び出しを使ってドロップダウンデータをロードすることです。私は、データを2回読み込む、あるいはまったく読み込まない、または（関数呼び出しで）ハンドラントをブラウザをクラッシュさせる無限ループにすることに成功しました。あなたが提供できるすべての提案は、ありがとう、ありがとう。

Answer 1

それはテーブルがインスタンス化された後に値を追加することは間違いなく可能です：

<button ng-click="dctrl.staticWeather.push('123')">Add data</button> 
<div>{{x}} {{dctrl.staticWeather}}</div> 

私は角$リソースサービスが使用するパターン使用をお勧めしたい： を - ロード機能で空の配列を宣言し - $はhttpの約束では、以前に割り当てられた配列 に解決データをコピーする - 配列を返す約束を

セットアップ

を解決する前に： vm.dynamicWeather = DemoService.getDynamicWeather（）;

と：

getDynamicWeather: function() { 
    var responseArray = []; 

    $http.get('weather.json') 
     .then(function successCallback(response) { 
     var i; 
     for (i = 0; i < response.data.length; i++) { 
      responseArray.push(response.data[i].weather); 
     } 
     }); 
     return responseArray; 
    } 

Answer 2

あなたは、代わりにオートコンプリートの使用タイプ=「ドロップダウン」のsource属性を使用することができますドロップダウンに動的なデータをロードするため。

以下のリンクをクリックして例を参照できます。 View Example 解決方法は提供されているドキュメントとは異なります。