嵌套在选择元素中的 ng 重复和 ng-if

Question

我的组件模板中有以下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 - 这是一个具有字段 id、name 和 specialPrograms的 LOB 对象，其中每个字段分别是字符串、字符串、数组类型。

lob.specialPrograms——一个特殊程序对象的数组

sp - 具有字段 ID 和名称的特殊程序对象。这两个字段都是字符串。

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

如您所见，我想创建一个选项元素或 optgroup 元素，其中包含选项元素列表，具体取决于 lob 在其 specialprograms 数组中是否有任何值。问题是，当填充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>

对我做错了什么有什么想法吗？

Answer 1

所以我决定使用 jquery 和 ajax 调用的延迟承诺来走指令路线。这是为了保持列表的顺序。如果我不需要维护列表的顺序，@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){
            });
        }
    }
});

Answer 2

尝试添加如下所示的过滤器：

<select class="form-control" ng-model="vm.selectedLob" ng-init="vm.selectedLob = 0">
      <option value="0">Select</option>
      <option ng-repeat="lob in lobs | filter: noSpecialPrograms" value="{{lob.id}}">
          {{lob.name}}
      </option>
      <optgroup ng-repeat="lob in lobs | filter: hasSpecialPrograms">
        <option ng-repeat="sp in lob.specialPrograms" value="{{lob.id + sp.id}}">
          {{sp.name}} {{lob.id + sp.id}}
        </option> 
      </optgroup>
  </select>

和 js

$scope.noSpecialPrograms = function(item) {
    return item.specialPrograms.length === 0;
};
$scope.hasSpecialPrograms = function(item) {
    return item.specialPrograms.length > 0;
};

Answer 3

也许不是你想要的，但更容易工作 ng-options 时是选择，甚至你可以分组选项示例：

---

<label>Color grouped by shade, with some disabled: <select ng-model="myColor" ng-options="color.name group by color.shade disable when color.notAnOption for color in colors"> </select> </label>

以下是 ng-options 的文档：ng-options