2014-12-04 15 views
6

SITUAZIONE:angolare tag ui-select su array di oggetti

Ho un app angolare che invia messaggi di posta elettronica. Ci sono tre campi: Indirizzo - Oggetto - Testo. Il campo indirizzo è costruito usando angolare ui-select

L'indirizzo di posta elettronica può essere scelto dall'elenco o inserito di nuovo. Il problema sta entrando nel nuovo indirizzo email.

Sto cercando di utilizzare la proprietà di tag per ottenerlo. Ma per quanto posso vedere funziona solo quando il ui di selezione è costituito da una serie di semplici stringhe e non quando è fatto di un array di oggetti

CODICE:

<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

Come si può vedere che sta funzionando correttamente per semplice array stringhe e non con o bjects matrice

DOMANDA:

Come posso usare il tag in ui-select con array di oggetti?

risposta

9

manca il nome della funzione nell'attributo .

provare

codifica = "tagTransform"

e quindi aggiungere la funzione tagTransform nel perimetro di controllo

$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

+2

può essere fatto senza marcatura multipla? –

+0

Per quello che vale. Sì, può essere fatto impostando: tagging-label = "false". Fonte: https://github.com/angular-ui/ui-select/issues/983 – Idrees