Question

它工作正常，但我不知道如何在下拉列表中处理多个项目。

请考虑以下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>

我想要定义滚动并缩短下拉列表。

有什么想法吗？

Answer 1

您可以使用css规则来定义dropdown-menu。

 .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

或者通常你可能希望你的应用程序有自己的样式下拉列表，在这种情况下为你的下拉列表添加一个自定义类和规则（这样你的网站看起来不像一个引导程序网站:)）例如： - < / p>

＆＃13;

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;
  };
}

＆＃13;

.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;
       }

＆＃13;

<!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>

＆＃13;

Answer 2

我知道这个问题太旧了，但我想那里的某个人将从这个答案中受益恩，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>

希望这个答案有帮助

如何处理drop-down angular-ui中的大项目列表？

2 个答案: