Add the ability for group selection

Author: skiminock

src/angularjs-dropdown-multiselect.js

@@ -22,7 +22,8 @@ directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', '$co
                 events: '=',
                 searchFilter: '=?',
                 translationTexts: '=',
-                groupBy: '@'
+                groupBy: '@',
+                groups: '='
             },
             template: function (element, attrs) {
                 var checkboxes = attrs.checkboxes ? true : false;
@@ -33,6 +34,8 @@ directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', '$co
                 template += '<ul class="dropdown-menu dropdown-menu-form" ng-if="open" ng-style="{display: open ? \'block\' : \'none\', height : settings.scrollable ? settings.scrollableHeight : \'auto\', overflow: \'auto\' }" >';
                 template += '<li ng-if="settings.showCheckAll && settings.selectionLimit !== 1"><a ng-keydown="keyDownLink($event)" data-ng-click="selectAll()" tabindex="-1" id="selectAll"><span class="glyphicon glyphicon-ok"></span>  {{texts.checkAll}}</a>';
                 template += '<li ng-if="settings.showUncheckAll"><a ng-keydown="keyDownLink($event)" data-ng-click="deselectAll();" tabindex="-1" id="deselectAll"><span class="glyphicon glyphicon-remove"></span>   {{texts.uncheckAll}}</a></li>';
+                template += '<li ng-if="currentGroups" class="divider"></li>';
+                template += '<li ng-repeat="currentGroup in currentGroups track by $index"><a ng-bind="::currentGroup.title" ng-click="selectCurrentGroup(currentGroup)" ng-class="{\'dropdown-selected-group\': selectedGroup == currentGroup.value}" tabindex="-1"></a></li>';
                 template += '<li ng-if="settings.showEnableSearchButton && settings.enableSearch"><a ng-keydown="keyDownLink($event); keyDownToggleSearch();" ng-click="toggleSearch($event);" tabindex="-1">{{texts.disableSearch}}</a></li>';
 		template += '<li ng-if="settings.showEnableSearchButton && !settings.enableSearch"><a ng-keydown="keyDownLink($event); keyDownToggleSearch();" ng-click="toggleSearch($event);" tabindex="-1">{{texts.enableSearch}}</a></li>';
 		template += '<li ng-if="(settings.showCheckAll && settings.selectionLimit > 0) || settings.showUncheckAll || settings.showEnableSearchButton" class="divider"></li>';
@@ -80,7 +83,7 @@ directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', '$co
                 					angular.element($element)[0].querySelector('.option').focus();
                 				}, 0);
 											}
-                		} 
+                		}
                 	}
                 };
 
@@ -157,6 +160,34 @@ directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', '$co
                 	}
                 });
 
+                $scope.$watch('groups', function (newVal) {
+                    if (newVal) {
+                        $scope.currentGroups = [];
+                        for (var i = 0; i < $scope.groups.length; ++i) {
+                            $scope.currentGroups.push({ value: $scope.groups[i], title: 'All ' + $scope.groups[i] });
+                        }
+                    }
+                });
+
+                $scope.selectCurrentGroup = function (currentGroup) {
+                    $scope.selectedGroup = currentGroup.value;
+                    if ($scope.orderedItems) {
+                        for (var i = 0; i < $scope.orderedItems.length; i++) {
+                            var item = $scope.orderedItems[i];
+                            var indexInSelected = $scope.selectedModel.map(function (it) { return it.id; }).indexOf(item.id);
+                            if (item[$scope.groupBy] == currentGroup.value) {
+                                if (indexInSelected == -1) {
+                                    $scope.selectedModel.push({ id: item.id });
+                                }
+                            } else {
+                                if (indexInSelected != -1) {
+                                    $scope.selectedModel.splice(indexInSelected, 1);
+                                }
+                            }
+                        }
+                    }
+                };
+
                 angular.extend($scope.settings, $scope.extraSettings || []);
                 angular.extend($scope.externalEvents, $scope.events || []);
                 angular.extend($scope.texts, $scope.translationTexts);
@@ -277,6 +308,7 @@ directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', '$co
                         $scope.setSelectedItem(value[$scope.settings.idProp], true, false);
                     });
                     $scope.externalEvents.onSelectionChanged();
+                    $scope.selectedGroup = null;
                 };
 
                 $scope.deselectAll = function (dontSendEvent) {
@@ -294,6 +326,7 @@ directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', '$co
                     if (!dontSendEvent) {
 											$scope.externalEvents.onSelectionChanged();
                     }
+                    $scope.selectedGroup = null;
                 };
 
                 $scope.setSelectedItem = function (id, dontRemove, fireSelectionChange) {
@@ -332,6 +365,7 @@ directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', '$co
                     if (fireSelectionChange) {
 											$scope.externalEvents.onSelectionChanged();
                     }
+                    $scope.selectedGroup = null;
                 };
 
                 $scope.isChecked = function (id) {
@@ -443,13 +477,13 @@ directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', '$co
 						}
 					}
                 };
-								
+
                 $scope.getFilter = function(searchFilter) {
                 	var filter = {};
                 	filter[$scope.settings.searchField] = searchFilter;
                 	return filter;
                 };
-								
+
 								$scope.toggleSearch = function($event) {
 									if ($event) {
 										$event.stopPropagation();
@@ -459,7 +493,7 @@ directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', '$co
 										$scope.input.searchFilter = '';
 									}
 								};
-								
+
 								$scope.keyDownToggleSearch = function() {
 									if (!$scope.settings.keyboardControls) {
 										return;