Merge pull request #102 from angular-ui/feat-groupby-choices

Changes on groupBy option for choices
angular-ui · Jul 11, 2014 · 2483674 · 2483674
2 parents 4d8ea26 + 58aa16b
commit 2483674
Show file tree

Hide file tree

Showing 6 changed files with 141 additions and 19 deletions.
diff --git a/examples/demo-groupby.html b/examples/demo-groupby.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="en" ng-app="demo">
+<head>
+  <meta charset="utf-8">
+  <title>AngularJS ui-select</title>
+
+  <!--
+    IE8 support, see AngularJS Internet Explorer Compatibility http://docs.angularjs.org/guide/ie
+    For Firefox 3.6, you will also need to include jQuery and ECMAScript 5 shim
+  -->
+  <!--[if lt IE 9]>
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/es5-shim/2.2.0/es5-shim.js"></script>
+    <script>
+      document.createElement('ui-select');
+      document.createElement('ui-select-match');
+      document.createElement('ui-select-choices');
+    </script>
+  <![endif]-->
+
+  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-sanitize.js"></script>
+  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css">
+
+  <!-- ui-select files -->
+  <script src="../dist/select.js"></script>
+  <link rel="stylesheet" href="../dist/select.css">
+
+  <script src="demo.js"></script>
+
+  <!-- Select2 theme -->
+  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.css">
+
+  <!--
+    Selectize theme
+    Less versions are available at https://github.com/brianreavis/selectize.js/tree/master/dist/less
+  -->
+  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.default.css">
+  <!-- <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.bootstrap2.css"> -->
+  <!-- <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.bootstrap3.css"> -->
+
+  <style>
+    body {
+      padding: 15px;
+    }
+
+    .select2 > .select2-choice.ui-select-match {
+      /* Because of the inclusion of Bootstrap */
+      height: 29px;
+    }
+
+    .selectize-control > .selectize-dropdown {
+      top: 36px;
+    }
+  </style>
+</head>
+
+<body ng-controller="DemoCtrl">
+  <script src="demo.js"></script>
+
+  <button class="btn btn-default btn-xs" ng-click="enable()">Enable ui-select</button>
+  <button class="btn btn-default btn-xs" ng-click="disable()">Disable ui-select</button>
+  <button class="btn btn-default btn-xs" ng-click="clear()">Clear ng-model</button>
+
+  <h3>Select2 theme</h3>
+  <p>Selected: {{person.selected}}</p>
+
+  <h2>Grouped using a string (group-by="'country'")</h2>
+  <ui-select ng-model="person.selected" theme="bootstrap" ng-disabled="disabled" style="min-width: 300px;">
+    <ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name}}</ui-select-match>
+    <ui-select-choices group-by="'country'" repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
+      <div ng-bind-html="person.name | highlight: $select.search"></div>
+      <small>
+        email: {{person.email}}
+        age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
+      </small>
+    </ui-select-choices>
+    </ui-select>
+
+  <h2>Grouped using a function (group-by="someGroupFn")</h2>
+  <ui-select ng-model="person.selected" theme="bootstrap" ng-disabled="disabled" style="min-width: 300px;">
+    <ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name}}</ui-select-match>
+    <ui-select-choices group-by="someGroupFn" repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
+      <div ng-bind-html="person.name | highlight: $select.search"></div>
+      <small>
+        email: {{person.email}}
+        age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
+      </small>
+    </ui-select-choices>
+    </ui-select>
+
+  <h2>Simple (no groupBy)</h2>
+  <ui-select ng-model="person.selected" theme="bootstrap" ng-disabled="disabled" style="min-width: 300px;">
+    <ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name}}</ui-select-match>
+    <ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
+      <div ng-bind-html="person.name | highlight: $select.search"></div>
+      <small>
+        email: {{person.email}}
+        age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
+      </small>
+    </ui-select-choices>
+  </ui-select>
+
+</body>
+</html>
diff --git a/examples/demo.js b/examples/demo.js
@@ -56,16 +56,28 @@ app.controller('DemoCtrl', function($scope, $http) {
     $scope.country.selected = undefined;
   };
 
+  $scope.someGroupFn = function (item){
+
+    if (item.name[0] >= 'A' && item.name[0] <= 'M')
+        return 'From A - M';
+
+    if (item.name[0] >= 'N' && item.name[0] <= 'Z')
+        return 'From N - Z';
+
+  };
+
   $scope.person = {};
   $scope.people = [
-    { name: 'Adam',      email: '[email protected]',      group: 'Foo', age: 12 },
-    { name: 'Amalie',    email: '[email protected]',    group: 'Foo', age: 12 },
-    { name: 'Estefanía', email: 'estefaní[email protected]', group: 'Foo', age: 21 },
-    { name: 'Adrian',    email: '[email protected]',    group: 'Foo', age: 21 },
-    { name: 'Wladimir',  email: '[email protected]',  group: 'Foo', age: 30 },
-    { name: 'Samantha',  email: '[email protected]',  group: 'bar', age: 30 },
-    { name: 'Nicole',    email: '[email protected]',    group: 'bar', age: 43 },
-    { name: 'Natasha',   email: '[email protected]',   group: 'Baz', age: 54 }
+    { name: 'Adam',      email: '[email protected]',      age: 12, country: 'United States' },
+    { name: 'Amalie',    email: '[email protected]',    age: 12, country: 'Argentina' },
+    { name: 'Estefanía', email: '[email protected]', age: 21, country: 'Argentina' },
+    { name: 'Adrian',    email: '[email protected]',    age: 21, country: 'Ecuador' },
+    { name: 'Wladimir',  email: '[email protected]',  age: 30, country: 'Ecuador' },
+    { name: 'Samantha',  email: '[email protected]',  age: 30, country: 'United States' },
+    { name: 'Nicole',    email: '[email protected]',    age: 43, country: 'Colombia' },
+    { name: 'Natasha',   email: '[email protected]',   age: 54, country: 'Ecuador' },
+    { name: 'Michael',   email: '[email protected]',   age: 15, country: 'Colombia' },
+    { name: 'Nicolás',   email: '[email protected]',    age: 43, country: 'Colombia' }
   ];
 
   $scope.address = {};
@@ -75,7 +87,7 @@ app.controller('DemoCtrl', function($scope, $http) {
       'http://maps.googleapis.com/maps/api/geocode/json',
       {params: params}
     ).then(function(response) {
-      $scope.addresses = response.data.results
+      $scope.addresses = response.data.results;
     });
   };
 

diff --git a/src/bootstrap/choices.tpl.html b/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="$index > 0"></div>
-    <div class="ui-select-choices-group-label dropdown-header">{{$group}}</div>
+    <div ng-show="$select.isGrouped" class="ui-select-choices-group-label dropdown-header">{{$group}}</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>

diff --git a/src/select.js b/src/select.js
@@ -183,6 +183,7 @@
       var repeat = RepeatParser.parse(repeatAttr),
         setItemsFn = groupByExp ? updateGroups : setPlainItems;
 
+      ctrl.isGrouped = !!groupByExp;
       ctrl.itemProperty = repeat.lhs;
 
       // See https://github.com/angular/angular.js/blob/v1.2.15/src/ng/directive/ngRepeat.js#L259
@@ -308,19 +309,22 @@
     // See https://github.com/ivaynberg/select2/blob/3.4.6/select2.js#L1431
     function _ensureHighlightVisible() {
       var container = $element.querySelectorAll('.ui-select-choices-content');
-      var rows = container.querySelectorAll('.ui-select-choices-row');
-      if (rows.length < 1) {
-        throw uiSelectMinErr('rows', "Expected multiple .ui-select-choices-row but got '{0}'.", rows.length);
+      var choices = container.querySelectorAll('.ui-select-choices-row');
+      if (choices.length < 1) {
+        throw uiSelectMinErr('choices', "Expected multiple .ui-select-choices-row but got '{0}'.", choices.length);
       }
 
-      var highlighted = rows[ctrl.activeIndex];
+      var highlighted = choices[ctrl.activeIndex];
       var posY = highlighted.offsetTop + highlighted.clientHeight - container[0].scrollTop;
       var height = container[0].offsetHeight;
 
       if (posY > height) {
         container[0].scrollTop += posY - height;
       } else if (posY < highlighted.clientHeight) {
-        container[0].scrollTop -= highlighted.clientHeight - posY;
+        if (ctrl.isGrouped && ctrl.activeIndex === 0)
+          container[0].scrollTop = 0; //To make group header visible when going all the way up
+        else
+          container[0].scrollTop -= highlighted.clientHeight - posY;
       }
     }
 
@@ -535,6 +539,7 @@
 
           if(groupByExp) {
             var groups = element.querySelectorAll('.ui-select-choices-group');
+            if (groups.length !== 1) throw uiSelectMinErr('rows', "Expected 1 .ui-select-choices-group but got '{0}'.", groups.length);
             groups.attr('ng-repeat', RepeatParser.getGroupNgRepeatExpression());
           }
 

diff --git a/src/select2/choices.tpl.html b/src/select2/choices.tpl.html
@@ -1,10 +1,10 @@
 <ul class="ui-select-choices ui-select-choices-content select2-results">
-  <li class="ui-select-choices-group">
-    <div class="ui-select-choices-group-label select2-result-label">{{$group}}</div>
+  <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>
     <ul class="select2-result-sub">
       <li class="ui-select-choices-row" ng-class="{'select2-highlighted': $select.isActive(this)}">
         <div class="select2-result-label ui-select-choices-row-inner"></div>
       </li>
     </ul>
   </li>
-</ul>
+</ul>
diff --git a/src/selectize/choices.tpl.html b/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 class="ui-select-choices-group-label optgroup-header">{{$group}}</div>
+      <div ng-show="$select.isGrouped" class="ui-select-choices-group-label optgroup-header">{{$group}}</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>