javascript - 在满足他们的承诺之前，我无法在 angularjs 中使用级联下拉绑定绑定模型字段

Question

我对 AngularJS 很陌生，并且继承了我认为是半生不熟的项目。我很害怕答案会是“你需要重写整个事情并重新考虑你的方法。谷歌它。” 但这里有。

TLDR：模型在异步GETS完成之前绑定，填充下拉列表，因此没有选择任何内容。

笔记：

• 使用剑道（因为项目是继承的。我觉得这是问题的一部分）
• ASP.NET mvc 项目。
• AngularJS 1.8.2
• 正在进行升级导致 http 获取问题，然后成功。

项目已清洗供公众使用。我将其描述为费用提交审批工作流应用程序。用户创建具有 CATEGORY 和 SUB CATEGORY 的费用。将这些视为两个下拉列表，从费用日期字段 > 类别 > 子类别级联。用户提交费用就好了。凉爽的

我用于加载费用以供审批的代码使用类似的页面，但我使用 HTTP 获取检索 ExpenseSubmission，然后在 THEN 我使用 HTTP.get.then 基于所选日期的可用类别，然后我想绑定初始用户在提交时选择了类别/子类别。这样做是因为我想显示选择的提交者，但批准者可能会更改类别。基于然后选择的提交者类别，我返回并获取子类别。再次，因为批准者可以更改并且必须使它们可用。

我当前的问题

类别和子类别的获取作为承诺返回并且是异步的。我有研究，现在知道不要尝试强制同步。我的问题是，模型绑定在填充下拉选项之前完成，我最终没有选择类别和子类别。

一些代码（试图去除多余的东西并将其缩减到最低限度）

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：

$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;
            });
        });
    });

我怀疑我会为此大发雷霆，所以我想重申，完全重写是不可能的，但如果它确实是解决这个问题的唯一方法，我会接受。只是希望我误解了关键部分或其他东西。该代码可能有拼写错误，因为它本质上是美化的伪代码。我复制了我的真实代码并更改了名称以保护受害者。

Stackoverflow 推荐这个： Angularjs - 下拉列表没有正确绑定并且没有显示初始值 它真的相关吗？

标签： javascriptangularjsasp.net-mvcpromise