Search code examples
htmlcssangularjsangular-uiangular-ui-bootstrap

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

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?

Solution

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