gpt4 book ai didi

javascript - 在 select 元素内嵌套 ng-repeats 和 ng-ifs

转载 作者:行者123 更新时间:2023-11-28 18:42:13 24 4
gpt4 key购买 nike

我的组件模板中有以下 html:

<select class="form-control" ng-model="vm.selectedLob">
<option value="0">Select...</option>
<div ng-repeat="lob in vm.lobs track by lob.id">
<option ng-if="lob.specialPrograms.length == 0" value="{{lob.id}}">
{{lob.name}}
</option>
<optgroup ng-if="lob.specialPrograms.length > 0" label="{{lob.name}}">
<option ng-repeat="sp in lob.specialPrograms track by sp.id" value="{{sp.id}}">
{{sp.name}}
</option>
</optgroup>
</div>
</select>

vm.lobs - 这是一个 lob 对象数组

lob - 这是一个 lob 对象,包含字段 id、name 和specialPrograms,其中每个字段的类型分别为 string、string、array。

lob.specialPrograms - 特殊程序对象数组

sp - 带有字段 id 和 name 的特殊程序对象。这两个字段都是字符串。

我试图在单击按钮时填充下拉列表,因此当此模板首次运行时,vm.lobs 数组为空。然后,当我单击按钮时,将触发 ajax 调用并填充 vm.lobs 数组。

如您所见,我想创建一个选项元素或 optgroup 元素,其中包含选项元素列表,具体取决于 lob 在其特殊程序数组中是否有任何值。问题是,当填充 vm.lobs 数组时,这种情况不会发生。

这是从上面的模板生成的 html:

<select class="form-control ng-valid ng-touched ng-not-empty ng-dirty ng-valid-parse" ng-model="vm.selectedLob">
<option value="0">Select...</option>

<!-- ngIf: lob.specialPrograms.length == 0 -->
<!-- ngIf: lob.specialPrograms.length > 0 -->

</select>

关于我做错了什么有什么想法吗?

最佳答案

所以我决定使用 jquery 和 ajax 调用的延迟 promise 来走指令路线。这是为了维持列表的顺序。如果我不需要维护列表的顺序,@Konkko 发布的解决方案是一个很好的解决方案。

angular.module('myapp').directive('lobOptionGroups', function(){
return {
restrict:'A',
link: function(scope, elem, attrs){
scope.vm.deferLob.then(function(lobs){
scope.vm.lobs = lobs;
for(var i = 0; i < lobs.length; i++){
var lob = lobs[i];

if(lob.specialPrograms.length > 0){
var optGroup = $("<optgroup label='"+lob.name+"'></optgroup>");

for(var j = 0; j < lob.specialPrograms.length; j++){
var sp = lob.specialPrograms[j];
optGroup.append($("<option value='"+sp.id+"'>"+sp.name+"</option>"));
}

elem.append(optGroup);
}
else{
elem.append($("<option value='"+lob.id+"'>"+lob.name+"</option>"));
}
}
},
function(error){

});
}
}
});

关于javascript - 在 select 元素内嵌套 ng-repeats 和 ng-ifs,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35947677/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com