2016-08-01 50 views
1

In this plunk我有一個包含名稱的列表的ui-選擇。我需要允許用戶輸入列表中的名稱或不在列表中的名稱。在ui中選擇一個不在列表中的值

如果我嘗試輸入一個不在列表中的名稱,則ui-select將自動使用列表中最接近的值重新計算該值。

有沒有辦法讓一個值不在列表中?

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> 

回答

1

您應該能夠使用的用戶界面,選擇tagging功能來實現你想要的。請參閱this Plunkr進行演示 - 如果您在框中鍵入「Gary」,然後標出,則會填充「Gary」。

要使用標記功能,您需要指定屬性taggingtagging-label如下:

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

因爲你的模型對象(而不是字符串)數組,那麼你需要指定一個函數將添加「新」項目到模型:

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

請注意,年齡和國家已經被設置爲「未知」,因爲我們無法確定它們是由剛剛在鍵入名稱什麼的電子郵件。也默認t o「[email protected]」。

還有一個bug與UI選擇其中tagging-label需要設置爲false(用於標記工作在單選模式)。這不幸意味着你不能指定一個標籤標籤功能在你輸入時出現在下拉列表中(儘管它可以在多選模式下工作)。

相關問題