如何模擬輸入的下拉列表？

Question

我有這部分代碼： http://jsfiddle.net/Lt7aP/1015/

什麼我真的想要做的是，當該輸入或按鈕旁邊我想擴大清單，但問題的用戶點擊的是，我不能讓下面這個列表輸入。任何建議？

<div class="input-group-btn"> 
<button type="button" data-toggle="dropdown"> 
<input class="input-sm-custom bg-light-black white bold fs15" readonly="readonly" style="border:1px solid #1d1d1d;width: 100%;font-weight: bold;" data-ng-model="selectedItem" ng-model-options="{ debounce: 500 }"> 
</button> 
<button type="button" class="bg-light-black dropdown-toggle input-sm-custom mr2 fs14 bt-light-black" data-toggle="dropdown"><span class="carret-arrow white "></span></button> 
<ul id="color-dropdown-menu" class="dropdown-menu dropdown-menu-list bg-light-black" role="menu" style="width: 100%;font-weight: bold;" ng-repeat="item in OddsRepresentations"> 
<li class="pointer padding2 fs15" ng-model="selectedItem" >{{item}}</li>  
</ul> 
</div> 

它的工作是這樣的：

<div class="select-wrapper"> 
<select class="form-control" data-ng-model="selectedItem" data-ng-options="item as item for item in OddsRepresentations" data-ng-change="changeOddsRepresentation()"></select> 
</div> 

但我想我自己的下拉在所有的瀏覽器相同的

Answer 1

我已經在你的代碼有一個工作下拉做出一些改變。首先，我設置了一個布爾值來顯示或不顯示列表。

這是通過在您的按鈕中添加ng-click="isOpen = !isOpen"完成的。然後你ul會是這樣：

<ul id="color-dropdown-menu" class="dropdown-menu dropdown-menu-list bg-light-black" role="menu" style="width: 100%;font-weight: bold;" ng-> 
<li class="pointer padding2 fs15" ng-if="isOpen" ng-repeat="item in OddsRepresentation" > 
    <span ng-click="select(item);" ng-bind="item"></span></li>  
</ul> 

請注意，這裏面還有一個ng-click您li，這對節省您的值，然後打印您的輸入。

Working Fiddle