Angular Marking ui-select over an array of objects

Question

SITUATION:

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

Email address can be selected from the list or re-entered. The problem is entering a new email address.

I am trying to use the tagging property to get it. But, as far as I can see, it works only when ui-select is made from an array of simple strings, and not when from 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 works correctly for a simple array of strings, not an array of objects

Question:

How can I use tagging in ui-select with an array of objects?

Answer 1

You do not have a function name in the tagged attribute.

to try

tagging = "tagTransform"

and then add the tagTransform function to the control area

 $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