选择元素

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对象，其中每个字段分别是string，string，array类型。

lob.specialPrograms - 一系列特殊程序对象

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

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

如您所见，我想创建一个option元素或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调用的延迟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){

            });
        }
    }
});

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

也许不是你想要的，但选择时更容易使用选项，即使你可以将选项分组：

<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