添加 optgroup 以异步进行角度选择

Question

我在我的项目中使用angular-selectize 指令。为此，我需要异步加载 optgroup。到目前为止，我已经尝试了多种方法，但都没有奏效。问题是，您不能同步使用 Promise 返回的数据。另一方面，我也无法从 promise 回调中初始化 selectize。下面给出的是我目前拥有的代码。请注意，它仅用于了解我正在使用的数据，而不是将其呈现为您认为正确的东西。

app.js

$http
.get('/get-categories')
.then(getCategoriesSCB, getCategoriesFCB);
function getCategoriesSCB(response) {
  if(typeof(response.data) === 'object') {
    posControl.menuCategories = response.data[0];
    posControl.menuCategoryGroups = response.data[1];
  }
  else {
    getCategoriesFCB(response);
  }
}
function getCategoriesFCB(response) {
  console.log(response);
}

posControl.menuConfig = {
  valueField: 'id',
  labelField: 'title',
  placeholder: 'Select Category',
  optgroupField: 'class',
  optgroupLabelField: 'label',
  optgroupValueField: 'value',
  optgroups: posControl.menuCategoryGroups,
  maxItems: 1,
  searchField: ['title', 'category'],
  onInitialize: function(selectize) {
    console.log('selectize is here');
  },
}

index.html

<selectize config="POSCtrl.menuConfig" options="POSCtrl.menuCategories" ng-model="POSCtrl.menuModel"></selectize>

ajax 调用返回的数据

[
    // this array has to be used for options.
    [{
        "class": "57b83830babb9",
        "category": "Food Menu",
        "id": "57b83855b23f9",
        "title": "Beverages"
    }, {
        "class": "57b83830babb9",
        "category": "Food Menu",
        "id": "57b83855c05de",
        "title": "Cuisines"
    }, {
        "class": "57b83830babb9",
        "category": "Food Menu",
        "id": "57b83855cdcb4",
        "title": "Steaks"
    }, {
        "class": "57b83830d0899",
        "category": "Wholesale Coffee",
        "id": "57b83830d0899",
        "title": "Wholesale Coffee"
    }],
    // this array has to be used for optgroups
    [{
        "value": "57b83830babb9",
        "label": "Food Menu"
    }, {
        "value": "57b83830d0899",
        "label": "Wholesale Coffee"
    }]
]

Answer 1

您应该能够通过直接在 posControl.menuConfig 上设置值来异步加载选择：

function getCategoriesSCB(response) {
  if (typeof(response.data) === 'object') {
    posControl.menuConfig.options = response.data[0];
    posControl.menuConfig.optgroups = response.data[1];
  }
}