Question

我有下拉列表：

<ul class="dropNav" ng-init="loadPage('countByDays', 'dataWithTrmGroup', selectedItem)" >
            <li>
                <img src="Images/toggle.png" />
                {{ selectedItem.name }}
                <ul>
                    <li ng-repeat="group in groupsData | groupfilter:selectedItem.id"  ng-click="changeSelectedObject('countByDays', 'dataWithTrmGroup', group)">{{ group.name }}</li>
                </ul>
            </li>
        </ul>

和我的css

.dropNav {
    cursor: pointer;
    list-style: none;
    padding: 0px;
    margin: 0px;
}
.dropNav li {   
    display: block;
    position: relative;
    float: left;    
}
.dropNav li ul {
    display: none;  
}
.dropNav li {
    width:200px;
    display: block;
    background: #93297e;
    padding: 10px 10px 10px 10px;
    text-decoration: none;
    white-space: nowrap;
    color: #fff;
    font-size:12px;
    font-family:Arial, Helvetica, sans-serif;   
}

当我试图放overflow-y: scroll;

时

它是可滚动的，但它只显示列表的1个元素。我希望看到10个元素，其他人将向下滚动。我试图设置<ul class="dropNav" size="10">但没有好结果。

Answer 1

为此，您应该使用angular-ui-select。通过使用此功能，您可以轻松地在可滚动下拉列表中使用图像，也可以使用文本（如果需要）。

Working Demo

如何在html中创建可滚动的dropDown列表

1 个答案: