带角度预输入的 ag-grid答案

【问题标题】：ag-grid with angular typeahead带角度预输入的 ag-grid
【发布时间】：2017-01-24 03:39:33
【问题描述】：

我正在尝试将 Angular Typeahead (https://angular-ui.github.io/bootstrap/) 与 ag-grid (https://www.ag-grid.com/) 一起使用。我已将 angularCompileRows 设置为 true，并为预输入设置了一个单元格编辑器，并且正在激活预输入下拉菜单。但是，下拉列表隐藏在网格中其他行的后面。我怎样才能确保我可以在其他网格行的顶部看到预先输入的下拉菜单？我尝试使用 firebug 将 <ul> 元素上的 z-index 设置为 9999，但该列表仍处于隐藏状态。

这是我的单元格编辑器：

 // function to act as a class
    function TypeAheadCellEditor () {}

    // gets called once before the renderer is used
    TypeAheadCellEditor.prototype.init = function(params) {
        // create the cell

        this.eInput = document.createElement('input');
        this.eInput.setAttribute("typeahead", "cardCode for cardCode in getCardCodes($viewValue)");
        this.eInput.setAttribute("typeahead-loading", "loadCardCodes");
        this.eInput.setAttribute("typeahead-wait-ms", "300");
        this.eInput.setAttribute("ng-model", "selectedItemCode");
        this.eInput.value = params.value;

    };

    // gets called once when grid ready to insert the element
    TypeAheadCellEditor.prototype.getGui = function() {
        return this.eInput;
    };

    // focus and select can be done after the gui is attached
    TypeAheadCellEditor.prototype.afterGuiAttached = function() {
        this.eInput.focus();

    };

    // returns the new value after editing
    TypeAheadCellEditor.prototype.getValue = function() {
        return this.eInput.value;
    };

【问题讨论】：

标签： angularjs angular-ui ag-grid

【解决方案1】：

您是否尝试过 uib-typeahead 的以下选项

typeahead-append-to $（默认值：null）- 是否应该将 typeahead 弹出窗口附加到元素而不是父元素？
typeahead-append-to-body $（默认值：false）- 是否应该将 typeahead 弹出窗口附加到 $body 而不是父元素？

【讨论】：

【解决方案2】：

将此添加到您的 CSS：

.ag-cell {
    overflow: visible;
}

【讨论】：