问题描述
我对 AngularJS 非常陌生,并且继承了我认为是半成品的项目。我很害怕答案会是“你需要重写整个事情并重新考虑你的方法。谷歌一下。”但在这里。
TLDR: 模型绑定在异步GETS 完成之前填充下拉列表,因此未选择任何内容。
注意事项:
项目已被清洗供公众消费。我将其描述为费用提交审批工作流应用程序。用户创建具有 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 (将#修改为@)