javascript - I am having trouble binding a model field in angularjs with cascading dropdowns binding before the HTTP.GET that fills them's promise is satisfied

Question

I am very new to AngularJS and have inherited what I think to be a half baked project. I am terrified the answer is going to be "you need to rewrite the whole thing and rethink your approach. Google it." but here goes.

TLDR: Model binds before async GETS complete that populate dropdowns so nothing is selected.

Notes:

• Using Kendo (Since the project is inherited. I feel like this is part of the issue)
• ASP.NET mvc project.
• AngularJS 1.8.2
• upgrade in progress causing issue with http gets and THEN success.

Project has been washed for public consumption. I will describe it as an expense submission approval workflow application. A user creates an expense that has a CATEGORY and a SUB CATEGORY. Consider these to be two dropdowns, cascading from an expense date field > Category > sub category. User submits expense just fine. Cool

My code for loading the expense for approval uses a similar page, but I use HTTP gets to retrieve ExpenseSubmission, then inside the THEN I use an HTTP.get.then the available Categories based on selected date, then I WANT to bind what the initial user selected for category/subcategory on their submission. This is done because I want to show what submitter selected, but approver may change categories. Based on the then selected submitter category, I go back and get the subcategories.. Again, because approver can change and have to make them available.

My Current issue

the gets for category and subcategory return as promises and are async. I have research and now know not to try and force SYNC. My problem is, the model binding completes BEFORE the dropdown options are populated, and I end up with category and sub category unselected.

Some Code (tried to strip out extra stuff and whittle it down to the bare minimum)

HTML:

<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6 colcelwidth">
    <select class="select_box"
            ng-attr-id="Category{{parentIndex}}_{{activityIndex}}"
            k-ng-model="item.CategoryId"
            k-value-primitive="true"
            k-option-label="'{{Label.SELECT}}'"
            kendo-drop-down-list
            k-data-text-field="'DescriptionValue'"
            k-data-value-field="'CategoryId'"
            k-data-source="item.Categories"
            k-on-change="GetSubCategories(parentIndex,item.CategoryId,$index)"
            k-ng-disabled="some is editable code redacted">
</select>
</div>
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6 colcelwidth">
    <select class="select_box"
            ng-attr-id="SubCategory{{parentIndex}}_{{activityIndex}}"
            k-ng-model="item.SubCategoryID"
            k-value-primitive="true"
            k-option-label="'{{Label.SELECT}}'"
            kendo-drop-down-list
            k-options="item.SelectLabel"
            k-rebind="item.SelectLabel"
            k-data-text-field="'DescriptionValue'"
            k-data-value-field="'HierarchyID'"
            k-data-source="item.lstSubMedia"
            k-on-change="OnSubMediaSelect(parentIndex,$index);CheckSubMediaIsDocumentRequired(item)"
            k-ng-disabled="(item.isActivityDisabled || isClaimSaved || item.AccuItemID>0 || item.ItemQueueId>0) || !item.subActivityMedia || isROIEdit"></select>
</div>

JS that has been possibly over simplified:

$http({
    url: hostAddress + URIGetExpenseDetail,
    method: 'POST',
    data: JSON.stringify({ PlanID }),
    headers: { 'content-type': 'application/json' }
}).then(
    function (success) {
        var expenseDetail = success.data;
        let testingPromises = $http.get(hostAddress + "expenses/GetExpenseCategories?somevalue=" + expenseDetail.NotReallyaDate);//.then(
        $q.all([tomPromise]).then(tomPromisesuccess => {
            expenseDetail.Categories = tomPromisesuccess[0].data;
            let testingPromises2 = $http.get(hostAddress + URIGetSubCategories + "?ParentCategoryID=" + expenseDetail.CategoryId);//.then(
            $q.all([testingPromises2]).then(success => {
                var subCategorylist = success[0].data;
                expenseDetail.SubCategories = subCategorylist;
            });
        });
    });

I am suspecting I am going to get guff for this so I want to reiterate, a complete rewrite isn't likely, but if it is literally the only way to fix this, I will accept that. Just hoping I am misunderstanding a key piece or something. The code might have typos since it is essentially glorified pseudo code. I copied my real code and changed names to protect the victims.

Stackoverflow recommends this: Angularjs - dropdown not binding correctly AND not showing initial value Is it actually related?

Answer 1

等待大神答复