Как обрабатывать большой список элементов в раскрывающемся списке angular-ui?

Я использую раскрывающийся список angular-ui

Он отлично работает, но я понятия не имею, как обрабатывать несколько элементов в раскрывающемся списке.

Рассмотрим следующий пример в 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-bootstrap angular-ui
person snaggs    schedule 21.09.2014    source источник

Ответы (2)


arrow_upward
21
arrow_downward

Вы могли бы просто иметь правило 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

Или, вообще, вы можете захотеть, чтобы ваше приложение имело собственный раскрывающийся список в стиле, в таких случаях добавьте собственный класс и правило для ваших раскрывающихся списков (чтобы ваш веб-сайт не выглядел как веб-сайт начальной загрузки :)), пример: -

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>

person PSL    schedule 21.09.2014
comment
довольно просто (кто знает как :)) - person Maxim Shoustin; 21.09.2014
comment
Этот ответ очень помог, но я столкнулся с проблемой, когда получение высоты элемента ul ($(dropdownContainer.nodeName).find('.dropdown-menu').outerHeight()) всегда равно максимальной высоте, даже если не хватает li, чтобы заполнить пространство и вызвать полосы прокрутки. Есть идеи, почему? - person Ellesedil; 10.10.2015
comment
@PSL, как остановить фоновую прокрутку? - person Shiva; 16.05.2017
comment
Что, если у вас есть еще больше ... Например, 20 000 элементов.. Как я могу сделать так, чтобы в раскрывающемся списке отображались только 5 элементов и опция «больше ...», открывающая всплывающее окно для просмотра всех элементов. - person danger89; 04.04.2018

arrow_upward
0
arrow_downward

Я знаю, что вопрос слишком старый, но я думаю, что кому-то будет полезен этот ответ. Ну, 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>

Надеюсь, этот ответ поможет

person joel    schedule 03.11.2020