Erlaube manuell eingegebenen Text in ui-select

Question

Ich benutze eine Auswahlbox von ui-select. Alles funktioniert gut, aber ich möchte manuell eingegebenen Text zulassen und möchte den Benutzer nicht von den Werten in der Liste einschränken. Wenn ich Text eintippe, filtert er meine Liste korrekt. Aber wenn ich nicht auf ein Element klicke und zum nächsten Feld gehe, wird mein Text verworfen.

Irgendwelche Ideen?

Danke und Gruß, Alex

Ich wollte nicht meinen Code zu erhalten, weil ich denke, dass es nicht richtig ist, aber es angefordert wurde:

<ui-select ng-model="formData[field.id].selected" theme="bootstrap"> 
    <ui-select-match placeholder="{{ lists[field.id].placeholder }}">{{$select.selected.text}}</ui-select-match> 
    <ui-select-choices repeat="item in lists[field.id].list | filter: $select.search"> 
     <div ng-bind-html="item.text | highlight: $select.search"></div> 
    </ui-select-choices> 
</ui-select> 

Die Daten in formData[field.id].selected gespeichert sind. field.id ist die Nummer des aktuellen Felds, das angezeigt werden soll (ich erstelle mein Formular dynamisch). Nimm einfach an, dass es einen eindeutigen int-Wert speichert.

bearbeiten 2015.08.04 Meine Lösung: Ich fand heraus, dass es scheint, als ob es kein Äquivalent zu einem C# combobox ist. Also ging ich weiter und benutzte zwei getrennte Felder. Es ist nicht das, was ich wollte, aber es funktioniert jetzt:

<ui-select ng-model="formData[field.id].selected" theme="bootstrap"> 
    <ui-select-match placeholder="{{ lists[field.id].placeholder }}">{{$select.selected.text}}</ui-select-match> 
    <ui-select-choices repeat="item in lists[field.id].list | filter: $select.search"> 
     <div ng-bind-html="item.text | highlight: $select.search"></div> 
    </ui-select-choices> 
</ui-select> 
<?php echo __('Create a new element if value is not in list'); ?> 
<div class="input-group"> 
    <span class="input-group-addon"> 
     <input type="checkbox" ng-model="disabled[field.id]"> 
    </span> 
    <input type="text" value="" ng-disabled="!disabled[field.id]" class="form-control" ng-model="formData[field.id].newValue" /> 
</div> 

Answer 1

hier eine Lösung:

HTML -

<ui-select ng-model="superhero.selected"> 
    <ui-select-match placeholder="Select or search a superhero ...">{{$select.selected}}</ui-select-match> 
    <ui-select-choices repeat="hero in getSuperheroes($select.search) | filter: $select.search"> 
    <div ng-bind="hero"></div> 
    </ui-select-choices> 
</ui-select> 

REGLER -

$scope.getSuperheroes = function(search) { 
var newSupes = $scope.superheroes.slice(); 
    if (search && newSupes.indexOf(search) === -1) { 
    newSupes.unshift(search); 
    } 
    return newSupes; 
} 

Hier ist die CodePen solution.

Answer 2

Sie das Tagging Attribut verwenden könnten wie in der Dokumentation erklärt: https://github.com/angular-ui/ui-select/wiki/ui-select

<ui-select multiple tagging tagging-label="(custom 'new' label)" ng-model="multipleDemo.colors"> 
... 
</ui-select> 

Answer 3

fand ich denke, dass ich einen Weg Erlauben Sie dem Benutzer, neue Einträge zu erstellen. Verwenden Sie die „on-Option“ Attribut, eine Funktion zu übergeben, die $ als Parameter wählen nimmt wie folgt:

<ui-select ng-model="person.selected" 
     theme="select2" 
     on-select="peopleSel($select)" 
     tagging 
     reset-search-input="false" 
     > 

    <ui-select-match placeholder="Enter a name...">{{$select.selected.name}}</ui-select-match> 
    <ui-select-choices repeat="sel in people | filter: {name: $select.search}"> 
    <div ng-bind-html="sel.name | highlight: $select.search"></div> 
    </ui-select-choices> 
    </ui-select> 

dann die Funktion erstellen, die einen neuen Eintrag hinzufügt, wenn die clickTriggeredSelect Variable ist false:

$scope.peopleSel= function(sel) { 
    if (sel.search && ! sel.clickTriggeredSelect) { 
    if (! sel.selected || sel.selected.name != sel.search) { 
     //Search for an existing entry for the given name 
     var newOne= personSearch(sel.search); 
     if (newOne === null) { 
     //Create a new entry since one does not exist 
     newOne= { name: sel.search, email: 'none', country: 'unknown' }; 
     $scope.people.push(newOne); 
     } 
     //Make the found or created entry the selected one 
     sel.selected= newOne; 
    } 
    } 
    sel.search= ''; //optional clearing of search pattern 
}; 

Beachten Sie, dass die PersonSearch-Definition hier nicht angegeben ist. Auch dieser Ansatz zum Testen von clickTriggeredSelect kann verwendet werden, um es dem Benutzer zu ermöglichen, das Feld abzuwählen, wenn ein leerer Eintrag die Präferenz ist.

PVC

Answer 4

ich die ui-select Projekt gegabelt haben diese Funktionalität durch die allow-Freitextattribut

<ui-select allow-free-text="true" ng-model="ctrl.freeTextDemo.color2" theme="bootstrap" style="width: 800px;" title="Choose a color"> 
    <ui-select-match placeholder="Select color...">{{$select.selected}}</ui-select-match> 
    <ui-select-choices repeat="color in ctrl.availableColors | filter: $select.search"> 
     <div ng-bind-html="color | highlight: $select.search"></div> 
    </ui-select-choices> 
</ui-select> 

Hier zu ermöglichen ist die plnker

Bis meine Pull-Anforderung durch die Winkel- akzeptiert UI-Team, können Sie die UI-Select-Build, die meine Patch auf my own repo

enthält