Angular: ui-select. Custom tagging with `refresh` function

Question

I need ability of multi-select for the input. The problem is that data comes from the server dynamically while a user tapping and if no appropriate data is found, I need to create a new label. Example of code: Getting addresses

Current example do not show information within label and do not show title tagging-label="(custom 'new' label)" if new info is entered (for example, you can type something like "blablablabla", the server should return nothing)

How can it be handled? The workaround where I can save all results to an array and work with an array instead of the server do not work for me...

Answer 1

When you use multiple you need to user $item in the ui-select-match

You need to use a custom function to create the new items (like "blablabla"). You do this in the tagging attribute of ui-select

The code that you need is something like this:

<ui-select multiple tagging="tagTransform" ng-model="myCompetences.competences" theme="bootstrap" ng-disabled="disabled" style="width: 800px;" title="Choose a person">
<ui-select-match placeholder="Select a address...">{{$item.formatted_address}}</ui-select-match>
<ui-select-choices repeat="address in addresses track by $index"  refresh="refreshAddresses($select.search)" refresh-delay="0">
<div ng-if="address.isTag" ng-bind-html="'<small>(new)</small>'"></div>
  <small>
    {{address.formatted_address}} 
  </small>
</ui-select-choices>
</ui-select>

Here you have the modifications in your example: http://plnkr.co/edit/CQkuSMQub9S81hSRueO1

Here a plnkr with usefull examples: http://plnkr.co/edit/m1SQXUxftBLQtitng1f0

If you want to add the information to your server or something like that, i recommend to use the on-select event.