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

Commit 6cad34c

Browse files
Vitaliy-YarovuyVitaliy-Yarovuy
committed
create demo for "group-filter"
1 parent 71c196d commit 6cad34c

File tree

6 files changed

+129
-9
lines changed

6 files changed

+129
-9
lines changed

‎dist/select.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*!
22
* ui-select
33
* http://github.com/angular-ui/ui-select
4-
* Version: 0.11.2 - 2015-03-17T04:08:46.478Z
4+
* Version: 0.11.2 - 2015-05-02T06:44:31.339Z
55
* License: MIT
66
*/
77

‎dist/select.js‎

Lines changed: 28 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*!
22
* ui-select
33
* http://github.com/angular-ui/ui-select
4-
* Version: 0.11.2 - 2015-03-17T04:08:46.474Z
4+
* Version: 0.11.2 - 2015-05-02T06:44:31.334Z
55
* License: MIT
66
*/
77

@@ -190,8 +190,9 @@ uis.directive('uiSelectChoices',
190190

191191
// var repeat = RepeatParser.parse(attrs.repeat);
192192
var groupByExp = attrs.groupBy;
193+
var groupFilterExp = attrs.groupFilter;
193194

194-
$select.parseRepeatAttr(attrs.repeat, groupByExp); //Result ready at $select.parserResult
195+
$select.parseRepeatAttr(attrs.repeat, groupByExp, groupFilterExp); //Result ready at $select.parserResult
195196

196197
$select.disableChoiceExpression = attrs.uiDisableChoice;
197198
$select.onHighlightCallback = attrs.onHighlight;
@@ -295,6 +296,18 @@ uis.controller('uiSelectCtrl',
295296
}
296297
}
297298

299+
function _groupsFilter(groups, groupNames) {
300+
var i, j, result = [];
301+
for(i = 0; i < groupNames.length ;i++){
302+
for(j = 0; j < groups.length ;j++){
303+
if(groups[j].name == [groupNames[i]]){
304+
result.push(groups[j]);
305+
}
306+
}
307+
}
308+
return result;
309+
}
310+
298311
// When the user clicks on ui-select, displays the dropdown list
299312
ctrl.activate = function(initSearchValue, avoidReset) {
300313
if (!ctrl.disabled && !ctrl.open) {
@@ -326,11 +339,11 @@ uis.controller('uiSelectCtrl',
326339
})[0];
327340
};
328341

329-
ctrl.parseRepeatAttr = function(repeatAttr, groupByExp) {
342+
ctrl.parseRepeatAttr = function(repeatAttr, groupByExp, groupFilterExp) {
330343
function updateGroups(items) {
344+
var groupFn = $scope.$eval(groupByExp);
331345
ctrl.groups = [];
332346
angular.forEach(items, function(item) {
333-
var groupFn = $scope.$eval(groupByExp);
334347
var groupName = angular.isFunction(groupFn) ? groupFn(item) : item[groupFn];
335348
var group = ctrl.findGroupByName(groupName);
336349
if(group) {
@@ -340,6 +353,14 @@ uis.controller('uiSelectCtrl',
340353
ctrl.groups.push({name: groupName, items: [item]});
341354
}
342355
});
356+
if(groupFilterExp){
357+
var groupFilterFn = $scope.$eval(groupFilterExp);
358+
if( angular.isFunction(groupFilterFn)){
359+
ctrl.groups = groupFilterFn(ctrl.groups);
360+
} else if(angular.isArray(groupFilterFn)){
361+
ctrl.groups = _groupsFilter(ctrl.groups, groupFilterFn);
362+
}
363+
}
343364
ctrl.items = [];
344365
ctrl.groups.forEach(function(group) {
345366
ctrl.items = ctrl.items.concat(group.items);
@@ -540,7 +561,9 @@ uis.controller('uiSelectCtrl',
540561
ctrl.clear = function($event) {
541562
ctrl.select(undefined);
542563
$event.stopPropagation();
543-
ctrl.focusser[0].focus();
564+
$timeout(function() {
565+
ctrl.focusser[0].focus();
566+
}, 0, false);
544567
};
545568

546569
// Toggle dropdown

‎dist/select.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/select.min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/demo-groupfilter.html‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
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: {{country.selected}}</p>
67+
68+
69+
<h2> Filter groups by array (group-filter="['Z','B','C']")</h2>
70+
<ui-select ng-model="country.selected" theme="select2" ng-disabled="disabled" style="width: 300px;" title="Choose a country">
71+
<ui-select-match placeholder="Select or search a country in the list...">{{$select.selected.name}}</ui-select-match>
72+
<ui-select-choices group-by="firstLetterGroupFn" group-filter="['Z','B','C']" repeat="country in countries | filter: $select.search">
73+
<span ng-bind-html="country.name | highlight: $select.search"></span>
74+
<small ng-bind-html="country.code | highlight: $select.search"></small>
75+
</ui-select-choices>
76+
</ui-select>
77+
78+
<h2> Filter groups using a function (group-filter="reverseOrderFilterFn")</h2>
79+
<ui-select ng-model="country.selected" theme="select2" ng-disabled="disabled" style="width: 300px;" title="Choose a country">
80+
<ui-select-match placeholder="Select or search a country in the list...">{{$select.selected.name}}</ui-select-match>
81+
<ui-select-choices group-by="firstLetterGroupFn" group-filter="reverseOrderFilterFn" repeat="country in countries | filter: $select.search">
82+
<span ng-bind-html="country.name | highlight: $select.search"></span>
83+
<small ng-bind-html="country.code | highlight: $select.search"></small>
84+
</ui-select-choices>
85+
</ui-select>
86+
87+
88+
</body>
89+
</html>

‎examples/demo.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,14 @@ app.controller('DemoCtrl', function($scope, $http, $timeout, $interval) {
7979

8080
};
8181

82+
$scope.firstLetterGroupFn = function (item){
83+
return item.name[0];
84+
};
85+
86+
$scope.reverseOrderFilterFn = function(groups) {
87+
return groups.reverse();
88+
};
89+
8290
$scope.personAsync = {selected : "wladimir@email.com"};
8391
$scope.peopleAsync = [];
8492

0 commit comments

Comments
 (0)