这里是 plunker- http://plnkr.co/edit/nMozzczMrbXJPfcps0A2?p=preview
如果你注意到了,我已经将下面的 css 类添加到自动查找功能中。
.dropdown-menu {
background-color:white;
overflow:scroll;
height:300px;
}
我不会在任何地方的 html 中提到这个类。 Bootstrap 自动采用此 css 类并将其应用到我的下拉列表中。
我不希望这种情况发生。我如何分配一个新类并将相同的属性分配给下拉菜单,如果我们键入任何字母表,下拉菜单会弹出。
最佳答案
您可以通过覆盖下拉模板来分配一个新的 CSS 类:
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap'])
.run(["$templateCache", function($templateCache) {
$templateCache.put("template/typeahead/typeahead-popup.html",
"<ul class=\"dropdown-menu your-custom-class\" ng-show=\"isOpen() && !moveInProgress\" ng-style=\"{top: position().top+'px', left: position().left+'px'}\" style=\"display: block;\" role=\"listbox\" aria-hidden=\"{{!isOpen()}}\">\n" +
" <li ng-repeat=\"match in matches track by $index\" ng-class=\"{active: isActive($index) }\" ng-mouseenter=\"selectActive($index)\" ng-click=\"selectMatch($index)\" role=\"option\" id=\"{{::match.id}}\">\n" +
" <div uib-typeahead-match index=\"$index\" match=\"match\" query=\"query\" template-url=\"templateUrl\"></div>\n" +
" </li>\n" +
"</ul>\n" +
"");
}]);
在这个例子中,我在 dropdown-menu 类旁边添加了 your-custom-class 类,并添加了 CSS 规则 - background: red
关于html - 使用 Bootstrap 的自动查找功能(Plunker Attached),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41774483/