ngHandsontable 将动态数据加载到下拉或自动完成字段中

Question

我正在尝试从 returns 承诺的服务调用中加载 ngHandsontable 下拉菜单和自动更正控件。当我从静态数据加载这些控件时，它们工作正常，但是当我尝试从异步调用加载它们时，控件是空的。

这个 plunker http://embed.plnkr.co/DQKBZK/ 有一个例子 table 可以正常工作。它加载了静态数组。第二个 table 能够从承诺中加载 table 行的数据，但我无法通过这种方式加载下拉列表或自动完成控件来加载任何内容。如果您能提供任何意见或建议，我将不胜感激。代码片段：

在模板中，两个 table 看起来很相似，这是动态的：

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

控制器加载第一个 table 并使用服务提供的静态数据进行控制：

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

动态数据由简单的 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"}
]

我已经为这个东西折腾了一段时间，但没有太大的成功。我尝试过的事情包括在 $timeout 中放置调用（以触发摘要循环）、获取 handsontable 的实例并强制渲染、使用对象而不是数组以及使用函数调用加载下拉数据。我已经成功加载了两次数据，或者根本没有加载数据，或者（通过函数调用）让 handsontable 陷入无限循环，导致浏览器崩溃。如果您能提供任何建议，我们将不胜感激。

Answer 1

肯定可以在 table 实例化后添加值：

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

我建议使用 angular $resource 服务使用的模式： - 在加载函数中声明一个空数组 - 在$http promise中，将解析后的数据复制到之前分配的数组中 - return promise 解析前的数组

设置： 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 属性，而不是自动完成使用 type='dropdown'.

您可以点击下面的link参考示例 View Example 解决方案与文档提供的解决方案不同。

ngHandsontable 将动态数据加载到下拉或自动完成字段中

ngHandsontable loading dynamic data into dropdown or autocomplete fields

json

angularjs

handsontable