允許在ui-select中手動輸入文本

Question

我正在使用ui-select中的選擇框。所有工作正常，但我想允許手動輸入的文本，並不想限制用戶從列表中可用的值。如果我輸入文本，它會正確過濾我的列表。但是，當我沒有點擊一個元素，並進入下一個領域，我的文字將被丟棄。

任何想法？

感謝和問候， 亞歷

我不想顯示我的代碼，因爲我認爲這是不正確的，但它要求：

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

的數據存儲在formData[field.id].selected。 field.id是要顯示的當前字段的編號（我正在動態生成我的表單）。假設它存儲一個唯一的int值。

編輯2015年4月8日 我的解決辦法： 我發現它好像沒有相當於C＃組合框。所以我繼續使用兩個獨立的領域。這不是我想要的東西，但它現在適用於：

<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

這裏是一個解決方案：

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> 

控制器 -

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

這裏是CodePen solution。

Answer 2

，如文檔中說明您可以使用標記屬性： 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

我想我找到了一種方法來允許用戶創建新條目。使用「上選擇」屬性來傳遞需要$選擇作爲參數如下功能：當clickTriggeredSelect變量是假

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

然後創建，增加了一個新的入口函數：

$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定義。也可以使用此測試clickTriggeredSelect的方法來允許用戶在空白條目是首選項時取消選擇該字段。

PVC

Answer 4

我已經分叉的用戶界面，選擇項目，以允許通過自由允許-文本屬性

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

下面這個功能是plnker

直到我拉的請求被接受angular- ui團隊，你可以得到包括我的補丁在內的ui-select版本my own repo