Merge pull request #171 from just-boris/master

fix(groupBy): preserve groups in order of appearance

Author: dimirc

src/bootstrap/choices.tpl.html

@@ -3,7 +3,7 @@
     ng-show="$select.items.length > 0">
   <li class="ui-select-choices-group">
     <div class="divider" ng-show="$select.isGrouped && $index > 0"></div>
-    <div ng-show="$select.isGrouped" class="ui-select-choices-group-label dropdown-header">{{$group}}</div>
+    <div ng-show="$select.isGrouped" class="ui-select-choices-group-label dropdown-header">{{$group.name}}</div>
     <div class="ui-select-choices-row" ng-class="{active: $select.isActive(this)}">
       <a href="javascript:void(0)" class="ui-select-choices-row-inner"></a>
     </div>

src/select.js

@@ -73,11 +73,11 @@
     };
 
     self.getGroupNgRepeatExpression = function() {
-      return '($group, $items) in $select.groups';
+      return '$group in $select.groups';
     };
 
     self.getNgRepeatExpression = function(itemName, source, trackByExp, grouped) {
-      var expression = itemName + ' in ' + (grouped ? '$items' : source);
+      var expression = itemName + ' in ' + (grouped ? '$group.items' : source);
       if (trackByExp) {
         expression += ' track by ' + trackByExp;
       }
@@ -146,22 +146,29 @@
       }
     };
 
+    ctrl.findGroupByName = function(name) {
+      return ctrl.groups && ctrl.groups.filter(function(group) {
+        return group.name === name;
+      })[0];
+    };
+
     ctrl.parseRepeatAttr = function(repeatAttr, groupByExp) {
       function updateGroups(items) {
-        ctrl.groups = {};
+        ctrl.groups = [];
         angular.forEach(items, function(item) {
           var groupFn = $scope.$eval(groupByExp);
-          var groupValue = angular.isFunction(groupFn) ? groupFn(item) : item[groupFn];
-          if(!ctrl.groups[groupValue]) {
-            ctrl.groups[groupValue] = [item];
+          var groupName = angular.isFunction(groupFn) ? groupFn(item) : item[groupFn];
+          var group = ctrl.findGroupByName(groupName);
+          if(group) {
+            group.items.push(item);
           }
           else {
-            ctrl.groups[groupValue].push(item);
+            ctrl.groups.push({name: groupName, items: [item]});
           }
         });
         ctrl.items = [];
-        angular.forEach(Object.keys(ctrl.groups).sort(), function(group) {
-          ctrl.items = ctrl.items.concat(ctrl.groups[group]);
+        ctrl.groups.forEach(function(group) {
+          ctrl.items = ctrl.items.concat(group.items);
         });
       }
 

src/select2/choices.tpl.html

@@ -1,6 +1,6 @@
 <ul class="ui-select-choices ui-select-choices-content select2-results">
   <li class="ui-select-choices-group" ng-class="{'select2-result-with-children': $select.isGrouped}">
-    <div ng-show="$select.isGrouped" class="ui-select-choices-group-label select2-result-label">{{$group}}</div>
+    <div ng-show="$select.isGrouped" class="ui-select-choices-group-label select2-result-label">{{$group.name}}</div>
     <ul ng-class="{'select2-result-sub': $select.isGrouped, 'select2-result-single': !$select.isGrouped}">
       <li class="ui-select-choices-row" ng-class="{'select2-highlighted': $select.isActive(this)}">
         <div class="select2-result-label ui-select-choices-row-inner"></div>

src/selectize/choices.tpl.html

@@ -1,7 +1,7 @@
 <div ng-show="$select.open" class="ui-select-choices selectize-dropdown single">
   <div class="ui-select-choices-content selectize-dropdown-content">
     <div class="ui-select-choices-group optgroup">
-      <div ng-show="$select.isGrouped" class="ui-select-choices-group-label optgroup-header">{{$group}}</div>
+      <div ng-show="$select.isGrouped" class="ui-select-choices-group-label optgroup-header">{{$group.name}}</div>
       <div class="ui-select-choices-row" ng-class="{active: $select.isActive(this)}">
         <div class="option ui-select-choices-row-inner" data-selectable></div>
       </div>

test/select.spec.js

@@ -231,7 +231,7 @@ describe('ui-select tests', function() {
       var el = createUiSelect();
       expect(el.find('.ui-select-choices-group .ui-select-choices-group-label').map(function() {
         return this.textContent;
-      }).toArray()).toEqual(['Baz', 'Foo', 'bar']);
+      }).toArray()).toEqual(['Foo', 'bar', 'Baz']);
     });
 
     it('should hide empty groups', function() {
@@ -246,16 +246,16 @@ describe('ui-select tests', function() {
 
     it('should change activeItem through groups', function() {
       var el = createUiSelect();
-      el.scope().$select.search = 'n';
+      el.scope().$select.search = 't';
       scope.$digest();
       var choices = el.find('.ui-select-choices-row');
       expect(choices.eq(0)).toHaveClass('active');
-      expect(getGroupLabel(choices.eq(0)).text()).toBe('Baz');
+      expect(getGroupLabel(choices.eq(0)).text()).toBe('Foo');
 
       triggerKeydown(el.find('input'), 40 /*Down*/);
       scope.$digest();
       expect(choices.eq(1)).toHaveClass('active');
-      expect(getGroupLabel(choices.eq(1)).text()).toBe('Foo');
+      expect(getGroupLabel(choices.eq(1)).text()).toBe('bar');
     });
   });
 
@@ -274,7 +274,7 @@ describe('ui-select tests', function() {
       var el = createUiSelect();
       expect(el.find('.ui-select-choices-group .ui-select-choices-group-label').map(function() {
         return this.textContent;
-      }).toArray()).toEqual(['even', 'odd']);
+      }).toArray()).toEqual(['odd', 'even']);
     });
   });