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

如何使用输入模拟下拉列表？

1 个答案: