Angular ui-select tagging on array of objects

Question

SITUATION:

I have an angular app that sends emails. There are three fields: Address - Subject - Text. The address field is built using angular ui-select

The email address can be choosen from the list or entered anew. The problem is entering the new email address.

I am trying to use the tagging property to obtain it. But as far as i can see is working only when the ui-select is made of an array of simple strings and not when is made of an array of objects

CODE:

<h3>Array of objects</h3>
<ui-select multiple tagging tagging-label="new tag" ng-model="multipleDemo.selectedPeople" theme="select2" ng-disabled="disabled" style="width: 800px;">
  <ui-select-match placeholder="Select person...">{{$item.name}} &lt;{{$item.email}}&gt;</ui-select-match>
  <ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
    <div ng-bind-html="person.name | highlight: $select.search"></div>
    <small>
      email: {{person.email}}
      age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
    </small>
  </ui-select-choices>
</ui-select>
<p>Selected: {{multipleDemo.selectedPeople}}</p>

PLUNKER:

http://plnkr.co/edit/nngkvjiQmI44smcNGRGm?p=preview

As you can see it is working properly for simple strings array and not with objects array

QUESTION:

How can i use the tagging in ui-select with array of objects?

Josephinejosephson

Answer 1

you have missing function name in the tagging attribute.

try

tagging="tagTransform"

and then add tagTransform function in the controller scope

$scope.tagTransform = function (newTag) {
  var item = {
     name: newTag,
     email: newTag+'@email.com',
     age: 'unknown',
     country: 'unknown'
   };
   return item;
};

http://plnkr.co/edit/7fSAKmj3pLeeTaid4pMH?p=preview

Schick

For what it's worth. Yes, it can be done by setting: tagging-label="false". Source: github.com/angular-ui/ui-select/issues/983 – Heathenry