diff --git a/examples/demo-groupby.html b/examples/demo-groupby.html new file mode 100644 index 000000000..489d501fa --- /dev/null +++ b/examples/demo-groupby.html @@ -0,0 +1,105 @@ + + + + + AngularJS ui-select + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Select2 theme

+

Selected: {{person.selected}}

+ +

Grouped using a string (group-by="'country'")

+ + {{$select.selected.name}} + +
+ + email: {{person.email}} + age: + + + + +

Grouped using a function (group-by="someGroupFn")

+ + {{$select.selected.name}} + +
+ + email: {{person.email}} + age: + + + + +

Simple (no groupBy)

+ + {{$select.selected.name}} + +
+ + email: {{person.email}} + age: + + + + + + diff --git a/examples/demo.js b/examples/demo.js index 1319f4af7..75f26bd5f 100644 --- a/examples/demo.js +++ b/examples/demo.js @@ -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', group: 'Foo', age: 12 }, - { name: 'Amalie', email: 'amalie@email.com', group: 'Foo', age: 12 }, - { name: 'Estefanía', email: 'estefanía@email.com', group: 'Foo', age: 21 }, - { name: 'Adrian', email: 'adrian@email.com', group: 'Foo', age: 21 }, - { name: 'Wladimir', email: 'wladimir@email.com', group: 'Foo', age: 30 }, - { name: 'Samantha', email: 'samantha@email.com', group: 'bar', age: 30 }, - { name: 'Nicole', email: 'nicole@email.com', group: 'bar', age: 43 }, - { name: 'Natasha', email: 'natasha@email.com', group: 'Baz', age: 54 } + { 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 = {}; @@ -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; }); }; diff --git a/src/bootstrap/choices.tpl.html b/src/bootstrap/choices.tpl.html index db6ff026c..511e0a4db 100644 --- a/src/bootstrap/choices.tpl.html +++ b/src/bootstrap/choices.tpl.html @@ -3,7 +3,7 @@ ng-show="$select.items.length > 0">
  • -
    {{$group}}
    +
    {{$group}}
    diff --git a/src/select.js b/src/select.js index 05fdc51b3..fb31b71a2 100644 --- a/src/select.js +++ b/src/select.js @@ -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 @@ -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; } } @@ -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()); } diff --git a/src/select2/choices.tpl.html b/src/select2/choices.tpl.html index 0ded38010..d74b48faf 100644 --- a/src/select2/choices.tpl.html +++ b/src/select2/choices.tpl.html @@ -1,10 +1,10 @@ + \ No newline at end of file diff --git a/src/selectize/choices.tpl.html b/src/selectize/choices.tpl.html index 244c16009..5bfb6edf0 100644 --- a/src/selectize/choices.tpl.html +++ b/src/selectize/choices.tpl.html @@ -1,7 +1,7 @@
    -
    {{$group}}
    +
    {{$group}}