Merge pull request #11 from spotlmnop/master

Scrollable multiselect - Added two settings scrollable and scrollableHei...

Author: dotansimha

pages/javascripts/pages/home/home.html

@@ -609,6 +609,18 @@ <h2>Settings</h2>
                 <td>angular.noop</td>
                 <td>A callback to a function that provide that name for each group when using group-by attribute. The parameter for the function will be the value of the group-by property.</td>
             </tr>
+            <tr>
+                <td>scrollable</td>
+                <td>Boolean</td>
+                <td>false</td>
+                <td>Indicates if the dropdown is scrollable, useful if you have a lot of items.</td>
+            </tr>
+            <tr>
+                <td>scrollableHeight</td>
+                <td>Number</td>
+                <td>300px</td>
+                <td>Indicates the height of the drop down if the dropdown is scrollable.</td>
+            </tr>
         </tbody>
     </table>
     <h2>Events</h2>

src/angularjs-dropdown-multiselect.js

@@ -20,7 +20,7 @@ directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', '$co
 
 			var template = '<div class="multiselect-parent btn-group dropdown-multiselect">';
 			template +='<button type="button" class="dropdown-toggle" ng-class="settings.buttonClasses" ng-click="toggleDropdown()">{{getButtonText()}}<span class="caret"></span></button>';
-			template += '<ul class="dropdown-menu dropdown-menu-form" ng-style="{display: open ? \'block\' : \'none\'}">';
+            template += '<ul class="dropdown-menu dropdown-menu-form" ng-style="{display: open ? \'block\' : \'none\', height : settings.scrollable ?   \'settings.scrollableHeight\' : \'auto\' }" style="overflow: scroll" >';
 			template += '<li ng-hide="!settings.showCheckAll || settings.selectionLimit > 0"><a data-ng-click="selectAll()"><span class="glyphicon glyphicon-ok"></span>  {{texts.checkAll}}</a>';
 			template += '<li ng-show="settings.showUncheckAll"><a data-ng-click="deselectAll();"><span class="glyphicon glyphicon-remove"></span>   {{texts.uncheckAll}}</a></li>';
 			template += '<li ng-hide="(!settings.showCheckAll || settings.selectionLimit > 0) && !settings.showUncheckAll" class="divider"></li>';
@@ -81,6 +81,8 @@ directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', '$co
 
 			$scope.settings = {
 				dynamicTitle: true,
+                scrollable: false,
+                scrollableHeight: '300px',
 				closeOnBlur: true,
 				displayProp: 'label',
 				idProp: 'id',