Eingabe in ui-Wählen Sie einen Wert, der nicht in der Liste ist

Question

In this plunk Ich habe eine UI-Auswahl mit einer Liste mit Namen. Ich muss dem Benutzer erlauben, einen Namen aus der Liste oder einen Namen einzugeben, der nicht in der Liste enthalten ist.

Wenn ich versuche, einen Namen einzugeben, der nicht in der Liste enthalten ist, wird dieser Wert von ui-select automatisch mit dem nächsten in der Liste abgeglichen.

Gibt es einen Weg zu einem Wert nicht in der Liste?

HTML

 <ui-select ng-model="ctrl.person.selected" theme="bootstrap"> 
     <ui-select-match>{{$select.selected.name}}</ui-select-match> 
     <ui-select-choices repeat="item in ctrl.people | filter: $select.search"> 
      <div ng-bind-html="item.name | highlight: $select.search"></div> 
      <small ng-bind-html="item.email | highlight: $select.search"></small> 
     </ui-select-choices> 
     </ui-select> 

Answer 1

Sie sollten die tagging Merkmal ui-select verwenden, um zu erreichen, was Sie wollen. Bitte sehen Sie sich this Plunkr für eine Demo an - wenn Sie "Gary" in die Box eingeben, dann wird sie mit "Gary" gefüllt.

die Tagging-Funktion zu nutzen, müssen Sie das Attribut tagging und tagging-label angeben wie folgt:

<ui-select ng-model="ctrl.person.selected" tagging="ctrl.tagTransform" tagging-label="false"> 

Da Ihr Modell ein Array von Objekten (nicht Strings), dann müssen Sie eine Funktion angeben, welche das „neue“ Element in das Modell fügt:

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

Bitte beachten sie, dass das Alter und Land gesetzt wurden „unbekannt“, da wir nicht bestimmen können, was sie sind, indem sie einfach den Namen eingeben die E-Mail. Auch t ist voreingestellt o "NAME@email.com".

Es gibt auch eine bug mit ui-select, bei der tagging-label auf false gesetzt werden muss (damit die Markierung im Single-Select-Modus funktioniert). Dies bedeutet leider, dass Sie keine Kennzeichnungsetikett-Funktion angeben können, die bei der Eingabe im Dropdown-Menü angezeigt wird (dies funktioniert jedoch im Modus "Mehrfachauswahl").