How to handle big list of items in drop-down angular-ui?

19,361

You could just have a css rule to define that, for 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

Or in general you may want your application to have its own styled dropdown, in such cases add a custom class and rule for your dropdowns (So that you website does not look like a bootstrap website :) ) an example:-

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>
Share:
19,361

Related videos on Youtube

snaggs
Author by

snaggs

Mostly work on demos and little Web/Mobile projects. Ask a lot of questions :)

Updated on June 04, 2022

Comments

  • snaggs
    snaggs over 1 year

    I use angular-ui drop down

    It works fine but I have no clue how to handle multiple item in drop down.

    Consider following example in 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>
    

    I want define scroll and set dropdown shorter.

    Any ideas?

  • Maxim Shoustin
    Maxim Shoustin about 9 years
    pretty simple (for who knows how :))
  • Ellesedil
    Ellesedil about 8 years
    This answer helped immensely, but I've run into a problem where getting the height of the ul element ($(dropdownContainer.nodeName).find('.dropdown-menu').outerH‌​eight()) always equals the max-height, even if there's not enough li's to fill the space and trigger the scrollbars. Any ideas as to why?
  • Shiva
    Shiva over 6 years
    @PSL how to stop background scrolling?
  • Melroy van den Berg
    Melroy van den Berg over 5 years
    What if you have even more.. Like 20.000 items.. How can I have a dropdown only show 5 items and the option with 'more...' opening a pop-up window to browser through all items.