ui select choices

The ui-select-choices is what the option tag is to a html select element.

Attributes

option	description	value
group-by	Group by expression	expression
ui-disable-choice	Disable a choice in the menu	expression

Events

event name	description	example
on-highlight	Occurs when an item was hovered on	on-highlight="showPreview(myValue)"

Example: Disable Choices

In case that you need to disable certain options so that they can't be selected by the interface, you can use ui-disable-choice attribute to pass an expression to check. For example:

<ui-select ng-model="model.people">
    <ui-select-match>{{$select.selected.name}}</ui-select-match>
    <ui-select-choices ui-disable-choice="value.status == 'inactive'" repeat="value.id as value in options | filter: $select.search">
        <div ng-bind-html="value.name | highlight: $select.search"></div>
    </ui-select-choices>
</ui-select>

Example: Grouping

On the ui-select-choices define the group-by property with a string or a function; example: group-by="someGroupFn" or group-by="'countries'". A variable attribute is not valid here, e.g. group-by="myType".

The function usage might look something like:

$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';
};

The function is automatically invoked with the item you are iterating over. Its can be in the same group twice if the function matches them twice.

To sort the groups, the items must already be in order with each type in the proper index given their sort attribute.

If you have 2 groups that are represented in 2 different lists you must merge the lists in order to group them. For example: I have a list of cities and countries that are seperated by the list type. You would have to merge the 2 lists and then use the group by option to filter them.

$scope.displayValues = function() {
    return cities.concat(countries);
}();

$scope.groupFind = function(item){
    return cities.indexOf(item) > -1 : "City" : "Country";
};

<ui-select ng-model="animal.names">
    <ui-select-match>{{$select.selected.name}}</ui-select-match>
    <ui-select-choices group-by="groupFind" repeat="value.id as value in animals | filter: $select.search">
        <div ng-bind-html="value.name | highlight: $select.search"></div>
    </ui-select-choices>
</ui-select>

If you want some options to have groups and other not, return undefined as the group in the callback and those will be inserted without a group. For example:

$scope.groupFind = function(item){
    return cities.indexOf(item) > -1 : "City" : undefined;
};

Example: Binding Single Property

In the repeat of the ui-select-choices identify the property you are wanting to bind to; repeat="item.id as item in cards">.

Example usage:

<ui-select ng-model="card.id">
    <ui-select-match>{{$select.selected.name}}</ui-select-match>
    <ui-select-choices repeat="item.id as item in reports | filter: $select.search">
        <div ng-bind-html="item.name | highlight: $select.search"></div>
    </ui-select-choices>
</ui-select>

Example: Repeat Filters

If you are using the ui-select-match search feature, its important to realize that most examples do generic property matching on the object your iterating. So given an example like:

<ui-select ng-model="card.id">
    <ui-select-match>{{$select.selected.name}}</ui-select-match>
    <ui-select-choices repeat="item.id as item in users | filter: $select.search">
        <div ng-bind-html="item.name | highlight: $select.search"></div>
    </ui-select-choices>
</ui-select>

and the users object looks like:

[{ name: 'Dan', description: 'Dan is a loser', id: 1234 }]

if you type 'loser' it will pull up 'Dan' but NOT highlight anything since we highlight the display the name. You can easily restrict the filter by adding a property name to the filter like:

<ui-select ng-model="card.id">
    <ui-select-match>{{$select.selected.name}}</ui-select-match>
    <ui-select-choices repeat="item.id as item in users | filter: { name: $select.search }">
        <div ng-bind-html="item.name | highlight: $select.search"></div>
    </ui-select-choices>
</ui-select>

The demo page has some more great examples for OR filters. Check it out.

See Angular Documentation for more info on filters.