Fügen Sie optgroups hinzu, um asynchron winkelselektiv zu werden

Question

Ich verwende angular-selectize Direktive in meinem Projekt. Dazu muss ich optgroups asynchron laden. Bisher habe ich mehrere Ansätze ausprobiert, aber keiner von ihnen funktioniert. Das Problem besteht darin, dass Sie die von einem Versprechen zurückgegebenen Daten nicht synchron verwenden können. Auf der anderen Seite war ich auch nicht in der Lage, Selectize innerhalb eines Versprechen Callback zu initialisieren. Nachstehend ist der Code, den ich derzeit habe. Beachten Sie, dass es nur dazu dient, die Idee der Daten, mit denen ich spiele, zu verstehen, nicht um es als etwas zu präsentieren, das Sie für richtig halten.

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> 

Daten von Ajax-Aufruf zurück

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

Sie sollten in der Lage sein, um eine Auswahl asynchron zu laden, indem Sie die Werte direkt in die posControl.menuConfig eingeben: