bootstrap-typeahead在ng-grid中不起作用

Question

我正在一个项目中工作，我必须在ng-grid单元格中显示一个预先输入。但是，typeahead在ng网格单元格中不起作用。我放了Plunker。

看到预先输入在网格上方的同一页面中工作。但它不适用于ng网格单元。你能帮忙吗？

提前致谢。

Answer 1

花了很长时间跟踪你的捡拾器中的所有问题，其中有很多问题：

• 您在网格单元格中使用的ng-model元素上缺少input指令，控制台中存在许多错误
• typeahead窗口作为输入元素后面的元素附加，因此它意味着您需要将其包装在父DOM元素中，例如：<div>

以上2项更改使预先工作成功。好吧 - 部分。生成正确的DOM结构等但由于CSS冲突没有显示任何内容。看起来两种类型的弹出窗口和网格中的单元格都是绝对定位的。对于网格来说这有点令人惊讶，但还可以。但真正的问题是，.ngCell类具有overflow: hidden;属性，并且它使得typeahead弹出窗口不可见。

如果您从overflow: hidden;移除.ngCell，则一切都开始“正常”：

http://plnkr.co/edit/pzLb3079yuhDtW1XIxvq?p=preview

我想我们正面临着Bootstrap的CSS和ng-grid CSS的冲突。我们无法在此项目中更改Bootstrap的CSS，因此您必须决定将此问题引起ngGrid人员的注意，或者破解其中一个CSS定义。

Answer 2

有关如何进行ng-grid + typeahead内联编辑的更多信息：

http://lemoncode.net/2014/01/28/ng-grid-inline-editing-using-bootstrap-typeahead/

plunkr：

http://plnkr.co/edit/8udsvZSokG5v37xicyuz?p=info