角度選擇下拉選項，讓用戶添加一個自定義選項

Question

我有一個HTML選擇下拉表單，要求用戶從一些預先選定的安全問題中挑選一個問題。 （例如「你最喜歡的城市是什麼」，「你的車的顏色是什麼」等等）

如何在列表中添加另一個選項，例如「編寫自己的」，並且當用戶選擇它時，顯示用於寫出他/她自己的問題的框。

我能想到的一個策略是創建一個帶有ng-show的輸入元素，以根據Select的值來隱藏/顯示它。有沒有更好的方法來做到這一點？

Answer 1

您最好的選擇可能是write a custom directive將模擬一個選擇框（可能使用樣式單選按鈕），但在那裏添加一個額外的選項，這是一個輸入。我爲幾個項目做了類似的事情，並認爲它不是特別困難，但需要考慮很多事情（包括可訪問性和鍵盤控制）。

或者你可以在網上找到許多開源指令之一。雖然它可能不是你正在尋找的UI-Select可能是一個不錯的選擇。

Answer 2

這裏有一個完全沒有JS的可能性：HTML combo box with option to type an entry這可能會要求您在<select>標記中使用ng-options指令。

不過，如果你更願意堅持與導入庫（IES），你可以通過注入一個文本輸入框到你的最後一個選項開始：

<select ng-model="selectedItem"> 
    <option ng-repeat="item in items" value="{{item}}">{{item}}</option> 
    <option ng-blur="addItem()"><input type="text" placeholder="Write your own" id="newItem"></option> 
    </select> 

然後你定義NG-模糊函數添加新項目的項目列表中的項目的數組中：

addItem = function() { 
     $scope.items[] = document.getElementById("newItem").value; 
    } 

你的變量名可能會有所不同，但是這是基本的過程，如果我有需要，我會用。可能還有一個更好的（Angular）指令或函數，可以更好地獲取注入文本框的值（可能通過名稱或父子關係）。

希望這點能指引您朝着正確的方向發展。

感謝，

克里斯