UI seçiminde el ile girilen metinlere izin ver

Question

UI seçiminden bir seçim kutusu kullanıyorum. Her şey iyi çalışıyor, ancak el ile girilen metne izin vermek istiyorum ve kullanıcıyı listedeki değerler ile kısıtlamak istemiyorum. Metin yazdığımda, listemi doğru şekilde filtreler. Ama bir öğeye tıklamam ve bir sonraki alana geçtiğimde metnim atılacak.

Herhangi bir fikrin var mı?

Teşekkür ve Saygılarımızla, Alex

ben doğru olmadığını düşünüyorum çünkü benim kod göstermek istemiyordu, ama istendi: Veri formData[field.id].selected saklanır

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

. field.id, görüntülenecek geçerli alanın numarasıdır (formumu dinamik olarak oluşturuyorum). Sadece benzersiz bir int değerini sakladığını varsayalım.

Düzenleme 2015/08/04 Çözümümün: Bir C# combobox eşdeğer yokmuş gibi görünüyor öğrendim. Böylece ileriye gittim ve iki ayrı alan kullandım. Ben bir yolunu buldum 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 1

bir çözümdür:

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 - İşte

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

CodePen solution olduğunu.

benim çekme isteği angular- tarafından kabul edilene kadar ben izin içermeyen metin özniteliği İşte

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

aracılığıyla bu işlevi sağlamak için ui-select projesini çatallı ettik

Answer 2

Sen etiketleme özelliği kullanabilirsiniz Kullanıcının yeni girişler oluşturmasına izin ver. clickTriggeredSelect değişken yanlış olduğunda

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

Sonra yeni bir giriş ekler işlevi oluşturun: $ aşağıdaki gibi bir parametre olarak seçmek alır bir işlevi geçmek "on-select" özelliğini kullanın

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

PersonSearch tanımının burada sağlanmadığını unutmayın. Ayrıca clickTriggeredSelect'in test edilmesine yönelik bu yaklaşım, kullanıcının boş bir giriş tercih olması durumunda alanın seçimini kaldırmasına izin vermek için kullanılabilir. Burada PVC

Answer 3

: bunu isteyerek değil, ama şimdilik çalışıyor: belgelerinde açıklandığı gibi

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

plnker

olduğunu ui ekibi, my own repo