Skip to content
This repository was archived by the owner on Oct 2, 2019. It is now read-only.

Commit 6dd1760

Browse files
dimircdimirc
committed
feat(groupBy): choices grouped by a property or function
1 parent 59d1d18 commit 6dd1760

File tree

4 files changed

+170
-22
lines changed

4 files changed

+170
-22
lines changed

‎examples/demo-groupby.html

+105
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
<!DOCTYPE html>
2+
<html lang="en" ng-app="demo">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>AngularJS ui-select</title>
6+
7+
<!--
8+
IE8 support, see AngularJS Internet Explorer Compatibility http://docs.angularjs.org/guide/ie
9+
For Firefox 3.6, you will also need to include jQuery and ECMAScript 5 shim
10+
-->
11+
<!--[if lt IE 9]>
12+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
13+
<script src="http://cdnjs.cloudflare.com/ajax/libs/es5-shim/2.2.0/es5-shim.js"></script>
14+
<script>
15+
document.createElement('ui-select');
16+
document.createElement('ui-select-match');
17+
document.createElement('ui-select-choices');
18+
</script>
19+
<![endif]-->
20+
21+
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.js"></script>
22+
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-sanitize.js"></script>
23+
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css">
24+
25+
<!-- ui-select files -->
26+
<script src="../dist/select.js"></script>
27+
<link rel="stylesheet" href="../dist/select.css">
28+
29+
<script src="demo.js"></script>
30+
31+
<!-- Select2 theme -->
32+
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.css">
33+
34+
<!--
35+
Selectize theme
36+
Less versions are available at https://github.com/brianreavis/selectize.js/tree/master/dist/less
37+
-->
38+
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.default.css">
39+
<!-- <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.bootstrap2.css"> -->
40+
<!-- <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.bootstrap3.css"> -->
41+
42+
<style>
43+
body {
44+
padding: 15px;
45+
}
46+
47+
.select2 > .select2-choice.ui-select-match {
48+
/* Because of the inclusion of Bootstrap */
49+
height: 29px;
50+
}
51+
52+
.selectize-control > .selectize-dropdown {
53+
top: 36px;
54+
}
55+
</style>
56+
</head>
57+
58+
<body ng-controller="DemoCtrl">
59+
<script src="demo.js"></script>
60+
61+
<button class="btn btn-default btn-xs" ng-click="enable()">Enable ui-select</button>
62+
<button class="btn btn-default btn-xs" ng-click="disable()">Disable ui-select</button>
63+
<button class="btn btn-default btn-xs" ng-click="clear()">Clear ng-model</button>
64+
65+
<h3>Select2 theme</h3>
66+
<p>Selected: {{person.selected}}</p>
67+
68+
<h2>Grouped using a string (group-by="'country'")</h2>
69+
<ui-select ng-model="person.selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;">
70+
<ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name}}</ui-select-match>
71+
<ui-select-choices group-by="'country'" repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
72+
<div ng-bind-html="person.name | highlight: $select.search"></div>
73+
<small>
74+
email: {{person.email}}
75+
age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
76+
</small>
77+
</ui-select-choices>
78+
</ui-select>
79+
80+
<h2>Grouped using a function (group-by="someGroupFn")</h2>
81+
<ui-select ng-model="person.selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;">
82+
<ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name}}</ui-select-match>
83+
<ui-select-choices group-by="someGroupFn" repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
84+
<div ng-bind-html="person.name | highlight: $select.search"></div>
85+
<small>
86+
email: {{person.email}}
87+
age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
88+
</small>
89+
</ui-select-choices>
90+
</ui-select>
91+
92+
<h2>Simple (no groupBy)</h2>
93+
<ui-select ng-model="person.selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;">
94+
<ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name}}</ui-select-match>
95+
<ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
96+
<div ng-bind-html="person.name | highlight: $select.search"></div>
97+
<small>
98+
email: {{person.email}}
99+
age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
100+
</small>
101+
</ui-select-choices>
102+
</ui-select>
103+
104+
</body>
105+
</html>

‎examples/demo.js

+21-9
Original file line numberDiff line numberDiff line change
@@ -56,16 +56,28 @@ app.controller('DemoCtrl', function($scope, $http) {
5656
$scope.country.selected = undefined;
5757
};
5858

59+
$scope.someGroupFn = function (item){
60+
61+
if (item.name[0] >= 'A' && item.name[0] <= 'M')
62+
return 'From A - M';
63+
64+
if (item.name[0] >= 'N' && item.name[0] <= 'Z')
65+
return 'From N - Z';
66+
67+
};
68+
5969
$scope.person = {};
6070
$scope.people = [
61-
{ name: 'Adam', email: 'adam@email.com', group: 'Foo', age: 12 },
62-
{ name: 'Amalie', email: 'amalie@email.com', group: 'Foo', age: 12 },
63-
{ name: 'Estefanía', email: 'estefanía@email.com', group: 'Foo', age: 21 },
64-
{ name: 'Adrian', email: 'adrian@email.com', group: 'Foo', age: 21 },
65-
{ name: 'Wladimir', email: 'wladimir@email.com', group: 'Foo', age: 30 },
66-
{ name: 'Samantha', email: 'samantha@email.com', group: 'bar', age: 30 },
67-
{ name: 'Nicole', email: 'nicole@email.com', group: 'bar', age: 43 },
68-
{ name: 'Natasha', email: 'natasha@email.com', group: 'Baz', age: 54 }
71+
{ name: 'Adam', email: 'adam@email.com', age: 12, country: 'United States' },
72+
{ name: 'Amalie', email: 'amalie@email.com', age: 12, country: 'Argentina' },
73+
{ name: 'Estefanía', email: 'estefania@email.com', age: 21, country: 'Argentina' },
74+
{ name: 'Adrian', email: 'adrian@email.com', age: 21, country: 'Ecuador' },
75+
{ name: 'Wladimir', email: 'wladimir@email.com', age: 30, country: 'Ecuador' },
76+
{ name: 'Samantha', email: 'samantha@email.com', age: 30, country: 'United States' },
77+
{ name: 'Nicole', email: 'nicole@email.com', age: 43, country: 'Colombia' },
78+
{ name: 'Natasha', email: 'natasha@email.com', age: 54, country: 'Ecuador' },
79+
{ name: 'Michael', email: 'michael@email.com', age: 15, country: 'Colombia' },
80+
{ name: 'Nicolás', email: 'nicole@email.com', age: 43, country: 'Colombia' }
6981
];
7082

7183
$scope.address = {};
@@ -75,7 +87,7 @@ app.controller('DemoCtrl', function($scope, $http) {
7587
'http://maps.googleapis.com/maps/api/geocode/json',
7688
{params: params}
7789
).then(function(response) {
78-
$scope.addresses = response.data.results
90+
$scope.addresses = response.data.results;
7991
});
8092
};
8193

‎src/select.js

+35-12
Original file line numberDiff line numberDiff line change
@@ -183,6 +183,7 @@
183183
var repeat = RepeatParser.parse(repeatAttr),
184184
setItemsFn = groupByExp ? updateGroups : setPlainItems;
185185

186+
ctrl.isGrouped = !!groupByExp;
186187
ctrl.itemProperty = repeat.lhs;
187188

188189
// See https://github.com/angular/angular.js/blob/v1.2.15/src/ng/directive/ngRepeat.js#L259
@@ -308,19 +309,22 @@
308309
// See https://github.com/ivaynberg/select2/blob/3.4.6/select2.js#L1431
309310
function _ensureHighlightVisible() {
310311
var container = $element.querySelectorAll('.ui-select-choices-content');
311-
var rows = container.querySelectorAll('.ui-select-choices-row');
312-
if (rows.length < 1) {
313-
throw uiSelectMinErr('rows', "Expected multiple .ui-select-choices-row but got '{0}'.", rows.length);
312+
var choices = container.querySelectorAll('.ui-select-choices-row');
313+
if (choices.length < 1) {
314+
throw uiSelectMinErr('choices', "Expected multiple .ui-select-choices-row but got '{0}'.", choices.length);
314315
}
315316

316-
var highlighted = rows[ctrl.activeIndex];
317+
var highlighted = choices[ctrl.activeIndex];
317318
var posY = highlighted.offsetTop + highlighted.clientHeight - container[0].scrollTop;
318319
var height = container[0].offsetHeight;
319320

320321
if (posY > height) {
321322
container[0].scrollTop += posY - height;
322323
} else if (posY < highlighted.clientHeight) {
323-
container[0].scrollTop -= highlighted.clientHeight - posY;
324+
if (ctrl.isGrouped && ctrl.activeIndex === 0)
325+
container[0].scrollTop = 0; //To make group header visible when going all the way up
326+
else
327+
container[0].scrollTop -= highlighted.clientHeight - posY;
324328
}
325329
}
326330

@@ -533,23 +537,42 @@
533537
var groupByExp = tAttrs.groupBy;
534538
return function link(scope, element, attrs, $select, transcludeFn) {
535539

540+
var choices;
541+
536542
if(groupByExp) {
537-
var groups = element.querySelectorAll('.ui-select-choices-group');
538-
groups.attr('ng-repeat', RepeatParser.getGroupNgRepeatExpression());
539-
}
543+
var group = element.querySelectorAll('.ui-select-choices-group');
544+
if (group.length !== 1) {
545+
throw uiSelectMinErr('rows', "Expected 1 .ui-select-choices-group but got '{0}'.", group.length);
546+
}
547+
group.attr('ng-repeat', RepeatParser.getGroupNgRepeatExpression());
548+
549+
choices = group.querySelectorAll('.ui-select-choices-row');
550+
if (choices.length !== 1) {
551+
throw uiSelectMinErr('rows', "Expected 1 .ui-select-choices-row but got '{0}'.", choices.length);
552+
}
553+
554+
}else{
555+
556+
choices = element.querySelectorAll('.ui-select-choices-row');
557+
if (choices.length !== 2) {
558+
throw uiSelectMinErr('rows', "Expected 2 .ui-select-choices-row but got '{0}'.", choices.length);
559+
}
540560

541-
var choices = element.querySelectorAll('.ui-select-choices-row');
542-
if (choices.length !== 1) {
543-
throw uiSelectMinErr('rows', "Expected 1 .ui-select-choices-row but got '{0}'.", choices.length);
544561
}
545562

546563
choices.attr('ng-repeat', RepeatParser.getNgRepeatExpression(repeat.lhs, '$select.items', repeat.trackByExp, groupByExp))
547564
.attr('ng-mouseenter', '$select.setActiveItem('+repeat.lhs+')')
548565
.attr('ng-click', '$select.select(' + repeat.lhs + ')');
549566

567+
//Remove unused .ui-select-choices-row element (simple/group) to avoid problems when _ensureHighlightVisible()
568+
//We aren't using ngIf since content at element won't be ready when getting at current link fn
569+
var otherRow = element.querySelectorAll('.ui-select-choices-row');
570+
angular.forEach(otherRow, function(row){
571+
if (choices[0] !== row) row.remove();
572+
});
550573

551574
transcludeFn(function(clone) {
552-
var rowsInner = element.querySelectorAll('.ui-select-choices-row-inner');
575+
var rowsInner = choices.querySelectorAll('.ui-select-choices-row-inner');
553576
if (rowsInner.length !== 1)
554577
throw uiSelectMinErr('rows', "Expected 1 .ui-select-choices-row-inner but got '{0}'.", rowsInner.length);
555578

‎src/select2/choices.tpl.html

+9-1
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,18 @@
11
<ul class="ui-select-choices ui-select-choices-content select2-results">
2-
<li class="ui-select-choices-group">
2+
3+
<!-- Simple -->
4+
<li ng-show="!$select.isGrouped" class="ui-select-choices-row" ng-class="{'select2-highlighted': $select.activeIndex === $index}">
5+
<div class="select2-result-label ui-select-choices-row-inner"></div>
6+
</li>
7+
8+
<!-- Grouped -->
9+
<li ng-show="$select.isGrouped" class="ui-select-choices-group select2-result-with-children">
310
<div class="ui-select-choices-group-label select2-result-label">{{$group}}</div>
411
<ul class="select2-result-sub">
512
<li class="ui-select-choices-row" ng-class="{'select2-highlighted': $select.isActive(this)}">
613
<div class="select2-result-label ui-select-choices-row-inner"></div>
714
</li>
815
</ul>
916
</li>
17+
1018
</ul>

0 commit comments

Comments
 (0)