Consentire testo inserito manualmente in ui-select

Question

Sto usando una casella di selezione da ui-select. Funziona tutto bene, ma voglio consentire il testo inserito manualmente e non voglio limitare l'utente ai valori disponibili nell'elenco. Se scrivo il testo, filtra correttamente la mia lista. Ma quando non faccio clic su un elemento e passiamo al campo successivo, il mio testo verrà scartato.

Qualche idea?

Grazie e saluti, Alex

Io non voglio mostrare il mio codice perché penso che non è corretto, ma è stato richiesto:

<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> 

I dati vengono memorizzati in formData[field.id].selected. field.id è il numero del campo corrente da visualizzare (sto generando il mio modulo in modo dinamico). Supponiamo che memorizzi un valore int esclusivo.

Modifica 2015/08/04 La mia soluzione: ho scoperto che sembra come se non v'è alcun equivalente a un C# combobox. Quindi sono andato avanti e ho usato due campi separati. Non è quello che volevo, ma funziona per ora:

<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

Ecco una soluzione:

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> 

CONTROLLER -

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

Ecco il CodePen solution.

Answer 2

È possibile utilizzare il tag attributo come spiegato nella documentazione: 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

Credo di aver trovato un modo per consentire all'utente di creare nuove voci. Utilizzare la "on-selezionate" attribuire a passare una funzione che prende $ selezionare come parametro, come di seguito:

<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> 

Quindi creare la funzione che aggiunge una nuova voce quando la variabile clickTriggeredSelect è falso:

$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 
}; 

Nota che la definizione di personSearch non è disponibile qui. Anche questo approccio di test di clickTriggeredSelect può essere utilizzato per consentire all'utente di deselezionare il campo se una voce vuota è la preferenza.

PVC

Answer 4

ho biforcato il progetto ui-select per consentire questa funzionalità tramite l'attributo allow-testo libero

<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> 

Ecco la plnker

Fino al mio richiesta di pull è accettata dal angular- ui team, puoi ottenere la build ui-select che include la mia patch su my own repo