UI-Select is the main directive of the module. It contains the following attributes:
| option | description | value | default |
|---|---|---|---|
close-on-select |
Closes a multi-select upon selection | boolean | true |
append-to-body |
Appends the dropdown to the box vs relative | boolean | false |
ng-disabled |
Control is disabled | boolean | |
ng-model |
Object bound to control | string,number,array | |
search-enabled |
Search is enabled | boolean | true |
reset-search-input |
Clears the search box after selecting an option | boolean | true |
theme |
Style of control, see themes section | string | 'bootstrap' |
tagging |
Enable tagging mode (add new items on the fly). Accepts a string which is a scope function. If your model is an array of objects, this string is required. The function will be passed the new item as a string and should return an object which is the transformed value to be pushed to the items array. | string ($scope function) | undefined |
tagging-label |
Set a label for tags that appear in the dropdown. Expects a string or false. If
false, then tagging happens without new items appearing in the dropdown. If
empty or undeclared, tagging-label defaults to (new)
|
string, boolean | undefined |
tagging-tokens |
Specify keyboard keys that will trigger creation of a new tag. Multiple keys can be
separated by a pipe |, SPACE is declaration for literal spacebar.
(Defaults to ENTER and ,)
|
string | [',','ENTER'] |
autofocus |
Automatically get focus when loaded. | boolean | false |
focus-on |
Define a scope event name to listen (e.g. focus-on='SomeEventName') | string | |
skip-focusser |
Set to true to skip the focusser after selecting an item. | boolean | false |
paste |
Accepts a string which is a scope function. The function will be passed the pasted text as a string. | string ($scope function) | undefined |
limit |
Limits the number of selected items in multiple select mode | integer | undefined |
Always have the theme set to bootstrap.
Although this directive has many different uses, we are specifically using it for its multiple selection
functionality.
Always ensure you have the multiple attribute set on your UI-Select
directive.
<ui-select multiple ng-model="something.id"> ... </ui-select>Selected: {{colors}}