angular ui bootstrap 提前输入 - 添加 class ，当附加到正文时

Question

我在我的项目中使用 angular bootstrap 预输入。并且有几个使用它的实例。

http://angular-ui.github.io/bootstrap/#/typeahead

它们中的几个是使用选项 "typeahead-append-to-body" 直接附加到正文的，所以例如，我需要自定义演示文稿，即可以添加一个 css class仅特定实例，即它创建的 ul，下拉菜单。但是我无法做到这一点，因为我找不到任何方法。如果它被附加到输入元素的父元素，它会很容易，但当附加到 body 时，似乎很难。

<input type="text" typeahead-append-to-body="true" typeahead="state as state.name for state in statesWithFlags | filter:{name:$viewValue}" typeahead-template-url="customTemplate.html">

我不想使用 body > .dropdown-menu 直接定位，因为它也会影响其他实例。

Answer 1

基本上，您可以将 class 添加到 input 标签，这样可以更准确地引用下拉菜单 ...

<input class="u-targetting-typeahead" ...>

... 然后，在 css 文件中 ...

.u-targetting-typeahead > .dropdown-menu

... 然后引用 just 该输入的下拉菜单。

下拉菜单是动态创建的，但输入是在 HTML 中创建的，当您想要如此具体时，它应该是您用来创建参考点的元素。

调整

正在看...

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

如果您将其设置为false，上述方法将起作用。我看不到任何其他合理的选择。

Answer 2

我终于意识到，我可以简单地使用 css 属性选择器来定位我正在使用的 html 模板。

借助 input typeahead 中提到的属性 "typeahead-template-url = 'mysearchdropdownpage.html' "，我在 css 中写了以下内容。

HTML

<input type="search" typeahead="searchItem for searchItem in searchTypeAhead" typeahead-template-url = 'mysearchdropdownpage.html' />

CSS

ul.dropdown-menu[template-url='mysearchdropdownpage.html']

它工作正常。