Tagging in ui-select (angular-ui) mulitselect

Question

I browsed a lot, but couldn't find a working solution for this. I have a ui-select multiselect UI-SELECT. By using 'tagging' and 'tagging-label' attributes we can add enter custom tags into the list. example is given in this plunker.

<ui-select multiple tagging tagging-label="(custom 'new' label)" ng-model="multipleDemo.colors" title="Choose a color">
    <ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match>
    <ui-select-choices repeat="color in availableColors | filter:$select.search">
      {{color}}
    </ui-select-choices>
  </ui-select>

When we type, if the 'custom-tag' suggestion is shown at the top of the list. How do I make it appear at the bottom of the list?

Example: when g is typed, the options shown in the drop-down are

[ g(custom 'new' label), Green, Magenta ]

but I want the order as

[ Green, Magenta, g(custom 'new' label) ]

i think it can be done in javascript, try to put the custom 'new' label at the end of the array — clearScreen

alcfeoh alcfeoh · Accepted Answer · 2015-10-19T17:53:10

According to the documentation, there does not seem to be any way to do that without modifying the angular-ui source code. A possible workaround would be to set tagging-label="false", which would remove the "new" label option.

This would be acceptable if you don't want that option, which may be the case as you're trying to put it down in the option list.

Tagging in ui-select (angular-ui) mulitselect

1 Answers