Customization

You can customize your select but keep in mind that the farther behaviour of your select from native behaviour, the more ugly code you need to write

oi-options="item.name for item in shopArrFn($query) track by item.id" ng-model="bundle" multiple oi-select-options="{ debounce: 200, searchFilter: 'mySearchFilter', dropdownFilter: 'myDropdownFilter', listFilter: 'myListFilter', editItem: 'myEditItem' }"

.filter('mySearchFilter', function($sce) { return function(label, query, item, options, element) { var html = '' + label + ''; return $sce.trustAsHtml(html); }; })

.filter('myDropdownFilter', function($sce) { return function(label, query, item, options, element) { var html = '#' + item.id + ' ' + label; return $sce.trustAsHtml(html); }; });

.filter('myListFilter', function() { return function (list, query, getLabel, options, element) { return list; } });

.factory('myEditItem', function() { return function(removedValue, lastQuery, getLabel, isCorrected, element) { return removedValue ? getLabel(removedValue) + ' :-)' : ''; }; })

{{bundle}}

Customization of grupping

oi-options="item.name group by item.category for item in shopArr" ng-model="bundle2" oi-select-options="{ closeList: false, groupFilter: 'myGroupFilter' }"

.filter('myGroupFilter', function($sce) { return function(label, query, items, options, element) { element[query ? 'addClass' : 'removeClass']('show'); function toggle(element){ angular.element(element).parent().parent().find('li').toggleClass('show'); var iconElement = angular.element(element).find('span'); iconElement.html(iconElement.html() === '+' ? '−' : '+'); } var html = '

+ ' + label + '

'; return $sce.trustAsHtml(html); }; });

oi-select .select-dropdown { max-height: none; } oi-select .group-header { cursor: pointer; } oi-select.show .select-dropdown .group-header-plus, oi-select .select-dropdown li:not(.ungroup) { display: none; } oi-select.show .select-dropdown li, oi-select .select-dropdown li.show { display: block; }

{{bundle2}}