html - 使用 Bootstrap 的自动查找功能(Plunker Attached)

Question

这里是 plunker- http://plnkr.co/edit/nMozzczMrbXJPfcps0A2?p=preview

如果你注意到了，我已经将下面的 css 类添加到自动查找功能中。

 .dropdown-menu {
background-color:white;
overflow:scroll;
height:300px;
}

我不会在任何地方的 html 中提到这个类。 Bootstrap 自动采用此 css 类并将其应用到我的下拉列表中。

我不希望这种情况发生。我如何分配一个新类并将相同的属性分配给下拉菜单，如果我们键入任何字母表，下拉菜单会弹出。

Answer 1

您可以通过覆盖下拉模板来分配一个新的 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

笨蛋:http://plnkr.co/edit/iMKsB5TULDYRcyfoYSek?p=preview