feat(typeahead): Custom CSS class for typeahead's dropdown menu

src/typeahead/docs/demo.html

@@ -1,3 +1,15 @@
+<style>
+    .dropdown-menu.demo-class {
+        border-radius: 0;
+        font-style: italic;
+        box-shadow: 5px 5px 0 rgba(0, 0, 0, .12);
+    }
+    .dropdown-menu.demo-class > .active > a,
+    .dropdown-menu.demo-class > .active > a:hover,
+    .dropdown-menu.demo-class > .active > a:focus {
+        background-color: rgba(247, 150, 4, .69);
+    }
+</style>
 <script type="text/ng-template" id="customTemplate.html">
   <a>
       <img ng-src="http://upload.wikimedia.org/wikipedia/commons/thumb/{{match.model.flag}}" width="16">
@@ -21,4 +33,8 @@ <h4>Asynchronous results</h4>
     <h4>Custom templates for results</h4>
     <pre>Model: {{customSelected | json}}</pre>
     <input type="text" ng-model="customSelected" placeholder="Custom template" typeahead="state as state.name for state in statesWithFlags | filter:{name:$viewValue}" typeahead-template-url="customTemplate.html" class="form-control">
+
+    <h4>Custom class for append-to-body popup</h4>
+    <pre>Model: {{customSelected | json}}</pre>
+    <input type="text" ng-model="customSelected" typeahead-append-to-body="true" typeahead-dropdown-custom-class="demo-class" placeholder="Custom class" typeahead="state as state.name for state in statesWithFlags | filter:{name:$viewValue}" class="form-control">
 </div>

src/typeahead/docs/readme.md

@@ -73,5 +73,9 @@ The typeahead directives provide several attributes:
    On blur, select the currently highlighted match
 
 * `typeahead-focus-on-select`
-   _(Defaults: true) :
+   _(Defaults: true)_ :
    On selection, focus the input element the typeahead directive is associated with
+
+* `typeahead-dropdown-custom-class`
+   _(Defaults: undefined)_ :
+   Add custom class to popup

src/typeahead/test/typeahead.spec.js

@@ -595,6 +595,19 @@ describe('typeahead tests', function() {
       findMatches(element).eq(1).trigger('mouseenter');
       expect(element).toBeOpenWithActive(2, 1);
     });
+
+    it('should add a custom class to popup', function() {
+      var element = prepareInputEl('<div><input ng-model="result" typeahead="item for item in source | filter:$viewValue" typeahead-dropdown-custom-class="demo-class"></div>');
+      changeInputValueTo(element, 'b');
+      expect(findDropDown(element).hasClass('demo-class')).toBeTruthy();
+    });
+
+    it('should add a custom class to popup with custom template', function() {
+      $templateCache.put('custom.html', '<div>foo</div>');
+      var element = prepareInputEl('<div><input ng-model="result" typeahead="item for item in source | filter:$viewValue" typeahead-dropdown-custom-class="demo-class" typeahead-template-url="custom.html"></div>');
+      changeInputValueTo(element, 'b');
+      expect(findDropDown(element).hasClass('demo-class dropdown-menu')).toBeTruthy();
+    });
   });
 
   describe('promises', function() {
@@ -895,6 +908,12 @@ describe('typeahead tests', function() {
       $timeout.flush();
       expect(dropdown.css('top')).toEqual('500px');
     });
+
+    it('should add a custom class to append-to-body popup', function() {
+      var element = prepareInputEl('<div><input ng-model="result" typeahead="item for item in source | filter:$viewValue" typeahead-append-to-body="true" typeahead-dropdown-custom-class="demo-class"></div>');
+      changeInputValueTo(element, 'b');
+      expect(findDropDown($document.find('body')).hasClass('demo-class')).toBeTruthy();
+    });
   });
 
   describe('focus first', function() {

src/typeahead/typeahead.js

@@ -133,6 +133,11 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position'])
           popUpEl.attr('popup-template-url', attrs.typeaheadPopupTemplateUrl);
         }
 
+        // Add a custom class to Dropdown Menu element
+        if (angular.isDefined(attrs.typeaheadDropdownCustomClass)) {
+          popUpEl.addClass(attrs.typeaheadDropdownCustomClass);
+        }
+
         var resetMatches = function() {
           scope.matches = [];
           scope.activeIdx = -1;