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

Changes on groupBy option for choices #102

Merged
merged 1 commit into from
Jul 11, 2014
Merged

Changes on groupBy option for choices #102

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
105 changes: 105 additions & 0 deletions examples/demo-groupby.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
30 changes: 21 additions & 9 deletions examples/demo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {};
Expand All @@ -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;
});
};

Expand Down
2 changes: 1 addition & 1 deletion src/bootstrap/choices.tpl.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
15 changes: 10 additions & 5 deletions src/select.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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;
}
}

Expand Down Expand Up @@ -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());
}

Expand Down
6 changes: 3 additions & 3 deletions src/select2/choices.tpl.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
2 changes: 1 addition & 1 deletion src/selectize/choices.tpl.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down