如何处理下拉angular-ui中的大项目列表？答案

【问题标题】：How to handle big list of items in drop-down angular-ui?如何处理下拉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>

我想定义滚动并设置下拉菜单更短。

有什么想法吗？

【问题讨论】：

标签： html css angularjs angular-ui angular-ui-bootstrap

【解决方案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 个项目和带有“更多...”的选项打开一个弹出窗口来浏览所有项目。