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

Question

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

查看typeahead是否在网格上方的同一页面中工作。但它在ng网格单元中不起作用。你能帮帮忙吗？

提前谢谢。

Answer 1

花了相当多的时间跟踪你的柱塞中的所有问题，有相当多的问题：

如果在网格的单元格中使用的input元素上缺少ng-model指令，则在console

• typeahead窗口中有许多错误作为元素附加在输入元素之后，因此这意味着您需要将其包装在父DOM元素中，例如：<div>

上面的2个改变使得typeahead能够工作。嗯--部分地。生成了正确的DOM结构等，但由于CSS冲突，没有显示任何内容。看起来typeahead弹出窗口和网格中的单元格都是绝对定位的。对于网格来说，这有点令人惊讶，但还好。然而，真正的问题是.ngCell类有overflow: hidden;属性，它使typeahead弹出窗口不可见。

如果您从.ngCell中删除overflow: hidden;，则一切都开始“工作”：

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