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

Commit 2483674

Browse files
dimircdimirc
committed
Merge pull request #102 from angular-ui/feat-groupby-choices
Changes on groupBy option for choices
2 parents 4d8ea26 + 58aa16b commit 2483674

File tree

6 files changed

+141
-19
lines changed

6 files changed

+141
-19
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="bootstrap" 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="bootstrap" 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="bootstrap" 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/bootstrap/choices.tpl.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
ng-show="$select.items.length > 0">
44
<li class="ui-select-choices-group">
55
<div class="divider" ng-show="$index > 0"></div>
6-
<div class="ui-select-choices-group-label dropdown-header">{{$group}}</div>
6+
<div ng-show="$select.isGrouped" class="ui-select-choices-group-label dropdown-header">{{$group}}</div>
77
<div class="ui-select-choices-row" ng-class="{active: $select.isActive(this)}">
88
<a href="javascript:void(0)" class="ui-select-choices-row-inner"></a>
99
</div>

‎src/select.js

+10-5
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

@@ -535,6 +539,7 @@
535539

536540
if(groupByExp) {
537541
var groups = element.querySelectorAll('.ui-select-choices-group');
542+
if (groups.length !== 1) throw uiSelectMinErr('rows', "Expected 1 .ui-select-choices-group but got '{0}'.", groups.length);
538543
groups.attr('ng-repeat', RepeatParser.getGroupNgRepeatExpression());
539544
}
540545

‎src/select2/choices.tpl.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<ul class="ui-select-choices ui-select-choices-content select2-results">
2-
<li class="ui-select-choices-group">
3-
<div class="ui-select-choices-group-label select2-result-label">{{$group}}</div>
2+
<li class="ui-select-choices-group" ng-class="{'select2-result-with-children': $select.isGrouped}">
3+
<div ng-show="$select.isGrouped" class="ui-select-choices-group-label select2-result-label">{{$group}}</div>
44
<ul class="select2-result-sub">
55
<li class="ui-select-choices-row" ng-class="{'select2-highlighted': $select.isActive(this)}">
66
<div class="select2-result-label ui-select-choices-row-inner"></div>
77
</li>
88
</ul>
99
</li>
10-
</ul>
10+
</ul>

‎src/selectize/choices.tpl.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<div ng-show="$select.open" class="ui-select-choices selectize-dropdown single">
22
<div class="ui-select-choices-content selectize-dropdown-content">
33
<div class="ui-select-choices-group optgroup">
4-
<div class="ui-select-choices-group-label optgroup-header">{{$group}}</div>
4+
<div ng-show="$select.isGrouped" class="ui-select-choices-group-label optgroup-header">{{$group}}</div>
55
<div class="ui-select-choices-row" ng-class="{active: $select.isActive(this)}">
66
<div class="option ui-select-choices-row-inner" data-selectable></div>
77
</div>

0 commit comments

Comments
 (0)