在满足它们的承诺的 HTTP.GET 之前,我无法使用级联下拉绑定绑定 angularjs 中的模型字段

问题描述

我对 AngularJS 非常陌生,并且继承了我认为是半成品的项目。我很害怕答案会是“你需要重写整个事情并重新考虑你的方法。谷歌一下。”但在这里

TLDR: 模型绑定在异步GETS 完成之前填充下拉列表,因此未选择任何内容

注意事项:

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

项目已被清洗供公众消费。我将其描述为费用提交审批工作流应用程序。用户创建具有 CATEGORY 和 SUB CATEGORY 的费用。将它们视为两个下拉菜单,从费用日期字段级联 > 类别 > 子类别。用户提交费用就好了。酷

我用于加载费用以供批准的代码使用了类似的页面,但我使用 HTTP 获取来检索费用提交,然后在 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 - dropdown not binding correctly AND not showing initial value 真的有关系吗?

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)