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

Review: Add choices grouping using 'group by' expression #99

Closed
wants to merge 3 commits into from
Closed

Review: Add choices grouping using 'group by' expression #99

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5fa3482
add choices grouping using 'group by' expression
just-boris Jul 8, 2014
59d1d18
fix bug in arrow navigation
just-boris Jul 10, 2014
6dd1760
feat(groupBy): choices grouped by a property or function
dimirc Jul 11, 2014
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
15 changes: 15 additions & 0 deletions examples/bootstrap.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,21 @@
</div>
</div>

<div class="form-group">
<label class="col-sm-3 control-label">Grouped</label>
<div class="col-sm-6">

<ui-select ng-model="person.selected" theme="bootstrap">
<ui-select-match placeholder="Select or search a person in the list...">{{$select.selected.name}}</ui-select-match>
<ui-select-choices group-by="'group'" repeat="item in people | filter: $select.search">
<span ng-bind-html="item.name | highlight: $select.search"></span>
<small ng-bind-html="item.email | highlight: $select.search"></small>
</ui-select-choices>
</ui-select>

</div>
</div>

<div class="form-group">
<label class="col-sm-3 control-label">With a clear button</label>
<div class="col-sm-6">
Expand Down
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="select2" 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="select2" 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="select2" 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: 'adam@email.com', age: 10 },
{ name: 'Amalie', email: 'amalie@email.com', age: 12 },
{ name: 'Wladimir', email: 'wladimir@email.com', age: 30 },
{ name: 'Samantha', email: 'samantha@email.com', age: 31 },
{ name: 'Estefanía', email: 'estefanía@email.com', age: 16 },
{ name: 'Natasha', email: 'natasha@email.com', age: 54 },
{ name: 'Nicole', email: 'nicole@email.com', age: 43 },
{ name: 'Adrian', email: 'adrian@email.com', age: 21 }
{ name: 'Adam', email: 'adam@email.com', age: 12, country: 'United States' },
{ name: 'Amalie', email: 'amalie@email.com', age: 12, country: 'Argentina' },
{ name: 'Estefanía', email: 'estefania@email.com', age: 21, country: 'Argentina' },
{ name: 'Adrian', email: 'adrian@email.com', age: 21, country: 'Ecuador' },
{ name: 'Wladimir', email: 'wladimir@email.com', age: 30, country: 'Ecuador' },
{ name: 'Samantha', email: 'samantha@email.com', age: 30, country: 'United States' },
{ name: 'Nicole', email: 'nicole@email.com', age: 43, country: 'Colombia' },
{ name: 'Natasha', email: 'natasha@email.com', age: 54, country: 'Ecuador' },
{ name: 'Michael', email: 'michael@email.com', age: 15, country: 'Colombia' },
{ name: 'Nicolás', email: 'nicole@email.com', 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
15 changes: 15 additions & 0 deletions examples/select2-bootstrap3.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,21 @@
</div>
</div>

<div class="form-group">
<label class="col-sm-3 control-label">Grouped</label>
<div class="col-sm-6">

<ui-select ng-model="person.selected" theme="select2" class="form-control">
<ui-select-match placeholder="Select or search a person in the list...">{{$select.selected.name}}</ui-select-match>
<ui-select-choices group-by="'group'" repeat="item in people | filter: $select.search">
<span ng-bind-html="item.name | highlight: $select.search"></span>
<small ng-bind-html="item.email | highlight: $select.search"></small>
</ui-select-choices>
</ui-select>

</div>
</div>

<div class="form-group">
<label class="col-sm-3 control-label">With a clear button</label>
<div class="col-sm-6">
Expand Down
15 changes: 15 additions & 0 deletions examples/selectize-bootstrap3.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,21 @@
</div>
</div>

<div class="form-group">
<label class="col-sm-3 control-label">Grouped</label>
<div class="col-sm-6">

<ui-select ng-model="person.selected" theme="selectize">
<ui-select-match placeholder="Select or search a person in the list...">{{$select.selected.name}}</ui-select-match>
<ui-select-choices group-by="'group'" repeat="item in people | filter: $select.search">
<span ng-bind-html="item.name | highlight: $select.search"></span>
<small ng-bind-html="item.email | highlight: $select.search"></small>
</ui-select-choices>
</ui-select>

</div>
</div>

<div class="form-group">
<label class="col-sm-3 control-label">With a clear button</label>
<div class="col-sm-6">
Expand Down
1 change: 1 addition & 0 deletions karma.conf.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ module.exports = function(config) {
'bower_components/angular-mocks/angular-mocks.js',

'dist/select.js',
'test/helpers.js',
'test/**/*.spec.js'
],

Expand Down
8 changes: 6 additions & 2 deletions src/bootstrap/choices.tpl.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
<ul class="ui-select-choices ui-select-choices-content dropdown-menu"
role="menu" aria-labelledby="dLabel"
ng-show="$select.items.length > 0">
<li class="ui-select-choices-row" ng-class="{active: $select.activeIndex === $index}">
<a class="ui-select-choices-row-inner" href="javascript:void(0)"></a>
<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 class="ui-select-choices-row" ng-class="{active: $select.isActive(this)}">
<a href="javascript:void(0)" class="ui-select-choices-row-inner"></a>
</div>
</li>
</ul>
23 changes: 23 additions & 0 deletions src/select.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,29 @@
overflow-x: hidden;
}

.ui-select-bootstrap .ui-select-choices-row>a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: 400;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
}

.ui-select-bootstrap .ui-select-choices-row>a:hover, .ui-select-bootstrap .ui-select-choices-row>a:focus {
text-decoration: none;
color: #262626;
background-color: #f5f5f5;
}

.ui-select-bootstrap .ui-select-choices-row.active>a {
color: #fff;
text-decoration: none;
outline: 0;
background-color: #428bca;
}

/* fix hide/show angular animation */
.ui-select-match.ng-hide-add,
.ui-select-search.ng-hide-add {
Expand Down
Loading