Question

我需要根据填充下拉列表的源数据的某些属性值动态添加<option>元素。有时，由于市场营销需要数据显示的疯狂方式，子元素需要成为<optgroup>个元素。由于要求，我不能用ng-options做简单的陈述，也不能用带有ng-repeat的子元素做父<select>。我在我的指令中遇到了各种问题，试图使用ng-switch或ng-if来获得所需的结果。

由于这些问题，我决定将整个select元素作为模板放在我的指令中。然后在链接函数中，我将解析所有传入的数据，并将格式正确的<option>或<optgroup>元素附加到模板中定义的父<select>。我在下面的指令中开始使用缩小的代码，并且当我注意到在UI中更改选定的选项时没有在我的控制器中触发父选择的ng-change函数时，我将使用条件逻辑对其进行扩展。当我让Angular使用ng-options添加所有选项时或者当我使用带有ng-repeat的子选项元素时，ng-change会触发。但是，使用模板中定义的最小父级然后在链接中动态添加子元素，将其分解为下面显示的方式不起作用。

app.directive('fullSelect', function ($compile) {
    return {
        restrict: 'E',
        scope: { datarepo: "=datarepo" },
        replace: true,
        template: "<select class='col-xs-8' id='gridStyle' " + 
                    'ng-model="vm.gridStyle" ng-change="vm.gridStyleUpdated()"></select>',
        link: function (scope, element, attrs) {
            angular.forEach(scope.datarepo, function (value, key) {
                var opt = angular.element('<option value="' + value.value + '">' + value.label + '</option>');
                element.append($compile(opt)(scope));
            });
        }
    }
});

我还尝试在forEach循环期间为每个新添加的<option>元素添加ng-click，但即使这些元素也不会触发。我认为这是某种范围/可见性问题。

提前感谢任何指导。

Answer 1

请试试这个：

::3

Answer 2

我终于得到了我想要的东西，稍微分解了我的指令并把它的一大部分放回到html视图中。现在事件正确触发，我还获得了嵌套选项和optgroup元素的额外好处，可以启动整个周期。以下是html的视图：

        <fieldset id="fs_gridStyle">
            <label class="col-xs-4" for="gridStyle">Grid Style *</label>
            <select class="col-xs-8" id="gridStyle"
                    ng-model="vm.gridStyle"
                    ng-change="vm.gridStyleUpdated()"
                    full-select datarepo="vm.gridStyles">
            </select>
        </fieldset>

这是指令的样子：

app.directive('fullSelect', function ($compile) {
    return {
        restrict: 'A',
        scope: { datarepo: "=datarepo" },
        replace: true,
        link: function (scope, element, attrs) {
            angular.forEach(scope.datarepo, function (value, key) {
                var opt;
                var display = "";
                for (var idx = 0; idx < value.level; idx++) {
                    display += "&nbsp;&nbsp;";
                }
                display += value.label;
                if (value.type === "Option") {
                    opt = angular.element('<option value="' + value.value + '">' + display + '</option>');
                }
                else {
                    opt = angular.element('<optgroup label="' + display + '"></optgroup>');
                }
                element.append($compile(opt)(scope));
            });
        }
    }
});

现在我只需要确保它正常运行，但到目前为止看起来还不错。它给了我想要的最终结果，其中我的传入对象数组包含值，标签和misc信息，例如level属性，以指示该项目应在下拉列表中缩进的位置等。我现在可以有任意数量的选项和optgroup子项嵌入在下拉列表中根据需要缩进。您不能嵌套多个optgroup元素，但我可以使用level属性直观地处理它，这会为文本添加空格。

<option> ele在指令的链接函数中动态添加，而不是触发父选择的ngChange

2 个答案: