如何处理下拉angular-ui中的大项目列表？
Posted
技术标签:
【中文标题】如何处理下拉angular-ui中的大项目列表？【英文标题】：How to handle big list of items in drop-down angular-ui? 【发布时间】：2014-11-15 14:31:37 【问题描述】：我用angular-ui drop down
它工作正常，但我不知道如何处理下拉列表中的多个项目。
考虑Plunker中的以下示例
HTML
<div class="btn-group" dropdown is-open="status.isopen">
<button type="button" class="btn btn-primary dropdown-toggle" ng-disabled="disabled">
Button dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li ng-repeat="item in items"><a href="#">item</a></li>
</ul>
</div>
我想定义滚动并设置下拉菜单更短。
有什么想法吗？
【问题讨论】：
【参考方案1】：我知道这个问题太老了，但我想有人会从这个答案中受益 好吧，通常使用 ngFor 来解决这个问题。对于我的一个特定用例，我必须在下拉菜单中的数组中显示一组值。我必须根据单击的下拉菜单中的项目更改过滤大小写。
所以我的 component.ts 文件由一个数组和一个函数组成，当单击下拉菜单中的项目时将调用该函数：
displayColumns: string[] = ['first_name', 'state', 'contact_no', 'email', 'gender', 'pincode', 'status', 'actions'];
filterColumnValue(val: any)
console.log(val);
console.log(val);
和我的 HTML 文件：
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#" *ngFor="let columns of displayColumns" (click)="filterColumnValue(columns)"> columns </a>
</div>
希望这个答案对你有帮助
【讨论】：
【参考方案2】：对于dropdown-menu，您可以只使用一个 css 规则来定义它。
.dropdown-menu
max-height: 300px; /*Provide height in pixels or in other units as per your layout*/
overflow-y: auto; /*Provide an auto overflow to diaply scroll*/
Plnkr
或者一般来说，您可能希望您的应用程序有自己的样式下拉菜单，在这种情况下为您的下拉菜单添加自定义类和规则（这样您的网站看起来不像引导网站:)）示例：-
angular.module('plunker', ['ui.bootstrap']);
function DropdownCtrl($scope)
$scope.items = [];
for(i=0; i<100; i++)
$scope.items.push("val_" + i);
$scope.status =
isopen: false
;
$scope.toggled = function(open)
console.log('Dropdown is now: ', open);
;
$scope.toggleDropdown = function($event)
$event.preventDefault();
$event.stopPropagation();
$scope.status.isopen = !$scope.status.isopen;
;
.btn-group.myapp-select .btn.dropdown-toggle
color:blue;
background:#cecece;
border-radius:2px;
.btn-group.myapp-select.open .btn.dropdown-toggle
background-color: #afafaf;
font-weight: bold;
.myapp-select > ul.dropdown-menu
max-height: 300px;
overflow-y: auto;
border-radius:2px;
.myapp-select > ul.dropdown-menu > li
color:blue;
background:#cecece;
<!doctype html>
<html ng-app="plunker">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<style>
.btn-group.myapp-select .btn.dropdown-toggle
color:blue;
background:#cecece;
border-radius:2px;
.btn-group.myapp-select.open .btn.dropdown-toggle
background-color: #afafaf;
font-weight: bold;
.myapp-select > ul.dropdown-menu
max-height: 300px;
overflow-y: auto;
border-radius:2px;
.myapp-select > ul.dropdown-menu > li
color:blue;
background:#cecece;
</style>
</head>
<body>
<div ng-controller="DropdownCtrl">
<!-- Single button -->
<div class="btn-group myapp-select" dropdown is-open="status.isopen">
<button type="button" class="btn btn-primary dropdown-toggle" ng-disabled="disabled">
Button dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li ng-repeat="item in items"><a href="#">item</a></li>
</ul>
</div>
</div>
</body>
</html>【讨论】：
很简单（谁知道怎么做：）） 这个答案非常有帮助，但我遇到了一个问题，即获取 ul 元素 ($(dropdownContainer.nodeName).find('.dropdown-menu').outerHeight()) 的高度始终等于最大高度，即使没有足够的 li 来填充空间并触发滚动条。关于为什么的任何想法？
@PSL 如何停止后台滚动？
如果你有更多.. 像 20.000 个项目.. 我怎样才能让一个下拉列表只显示 5 个项目和带有“更多...”的选项打开一个弹出窗口来浏览所有项目。以上是关于如何处理下拉angular-ui中的大项目列表？的主要内容，如果未能解决你的问题，请参考以下文章
在 Selenium Webdriver 如何处理这种包含复选框的多选下拉列表