Question

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

如果您注意到，我已将以下css类添加到自动查找功能。

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

我不想在任何地方用html提及这个类。引导程序自动获取此css类并将其应用于我的下拉列表。

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

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" +
       "");
}]);

在此示例中，我在下拉菜单类旁边添加了 your-custom-class 类，并添加了CSS规则 - background：red

plunker：http://plnkr.co/edit/iMKsB5TULDYRcyfoYSek?p=preview

使用bootstrap自动查找功能（Plunker Attached）

1 个答案: