Changed currentGroups attribute to a extraSetting field named selectByGroups

- selectByGroups is an array with objects with a label and a value

Author: pkempenaers

src/angularjs-dropdown-multiselect.js

@@ -22,8 +22,7 @@ directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', '$co
                 events: '=',
                 searchFilter: '=?',
                 translationTexts: '=',
-                groupBy: '@',
-                currentGroups: '=selectByGroups'
+                groupBy: '@'
             },
             template: function (element, attrs) {
                 var checkboxes = attrs.checkboxes ? true : false;
@@ -34,16 +33,17 @@ 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 && ((settings.showCheckAll && settings.selectionLimit > 0) || settings.showUncheckAll)" 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.selectByGroups && ((settings.showCheckAll && settings.selectionLimit > 0) || settings.showUncheckAll)" class="divider"></li>';
+                template += '<li ng-repeat="currentGroup in settings.selectByGroups track by $index" ng-click="selectCurrentGroup(currentGroup)"><a ng-class="{\'dropdown-selected-group\': selectedGroup === currentGroup.value}" tabindex="-1">{{::texts.selectGroup}} {{::currentGroup.label}}</a></li>';
+                template += '<li ng-if="settings.selectByGroups" class="divider"></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 || currentGroups" class="divider"></li>';
+		template += '<li ng-if="(settings.showCheckAll && settings.selectionLimit > 0) || settings.showUncheckAll || settings.showEnableSearchButton" class="divider"></li>';
                 template += '<li ng-if="settings.enableSearch"><div class="dropdown-header"><input type="text" class="form-control searchField" ng-keydown="keyDownSearchDefault($event); keyDownSearch($event, input.searchFilter);" ng-style="{width: \'100%\'}" ng-model="input.searchFilter" placeholder="{{texts.searchPlaceholder}}" /></li>';
                 template += '<li ng-if="settings.enableSearch" class="divider"></li>';
 
                 if (groups) {
-                	template += '<li ng-repeat-start="option in orderedItems | filter:getFilter(input.searchFilter)" ng-show="getPropertyForObject(option, settings.groupBy) !== getPropertyForObject(orderedItems[$index - 1], settings.groupBy)" role="presentation" class="dropdown-header">{{ getGroupTitle(getPropertyForObject(option, settings.groupBy)) }}</li>';
+                	template += '<li ng-repeat-start="option in orderedItems | filter:getFilter(input.searchFilter)" ng-show="getPropertyForObject(option, settings.groupBy) !== getPropertyForObject(orderedItems[$index - 1], settings.groupBy)" role="presentation" class="dropdown-header">{{ getGroupLabel(getPropertyForObject(option, settings.groupBy)) }}</li>';
                 	template += '<li ng-class="{\'active\': isChecked(getPropertyForObject(option,settings.idProp)) && settings.styleActive}" ng-repeat-end role="presentation">';
                 } else {
                 	template += '<li ng-class="{\'active\': isChecked(getPropertyForObject(option,settings.idProp)) && settings.styleActive}" role="presentation" ng-repeat="option in options | filter:getFilter(input.searchFilter)">';
@@ -99,7 +99,7 @@ directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', '$co
                     onDeselectAll: angular.noop,
                     onInitDone: angular.noop,
                     onMaxSelectionReached: angular.noop,
-										onSelectionChanged: angular.noop
+					onSelectionChanged: angular.noop
                 };
 
                 $scope.settings = {
@@ -136,8 +136,9 @@ directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', '$co
                     searchPlaceholder: 'Search...',
                     buttonDefaultText: 'Select',
                     dynamicButtonTextSuffix: 'checked',
-										disableSearch: 'Disable search',
-										enableSearch: 'Enable search'
+					disableSearch: 'Disable search',
+					enableSearch: 'Enable search',
+                    selectGroup: 'Select all:'
                 };
 
                 $scope.input = {
@@ -160,23 +161,16 @@ directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', '$co
                 	}
                 });
 
-                $scope.selectCurrentGroup = function (currentGroup) {
-                    $scope.selectedGroup = currentGroup.value;
+                $scope.selectCurrentGroup = function(currentGroup) {
+                    $scope.selectedModel.splice(0, $scope.selectedModel.length);
                     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);
-                                }
+                        $scope.orderedItems.forEach(function(item) {
+                            if (item[$scope.groupBy] === currentGroup.value) {
+                                $scope.setSelectedItem($scope.getPropertyForObject(item, $scope.settings.idProp), false, false)
                             }
-                        }
+                        });
                     }
+                    $scope.externalEvents.onSelectionChanged();
                 };
 
                 angular.extend($scope.settings, $scope.extraSettings || []);
@@ -233,7 +227,7 @@ directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', '$co
                     });
                 }
 
-                $scope.getGroupTitle = function (groupValue) {
+                $scope.getGroupLabel = function (groupValue) {
                     if ($scope.settings.groupByTextProvider !== null) {
                         return $scope.settings.groupByTextProvider(groupValue);
                     }
@@ -354,7 +348,7 @@ directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', '$co
                     	}
                     }
                     if (fireSelectionChange) {
-											$scope.externalEvents.onSelectionChanged();
+						$scope.externalEvents.onSelectionChanged();
                     }
                     $scope.selectedGroup = null;
                 };