Làm thế nào để xử lý danh sách lớn các mục trong góc thả xuống-ui?

Tôi sử dụng angular-ui drop down Làm thế nào để xử lý danh sách lớn các mục trong góc thả xuống-ui?

Nó hoạt động tốt nhưng tôi không biết cách xử lý nhiều mục trong trình đơn thả xuống.

Hãy xem xét ví dụ sau đây trong 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>

Tôi muốn xác định cuộn và thiết lập danh sách thả xuống ngắn hơn.

Bất kỳ ý tưởng nào?

Nguồn

2014-09-21 snaggs

Bạn chỉ có thể có quy tắc css để xác định rằng, đối với 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

Hoặc nói chung bạn có thể muốn ứng dụng của bạn để có thả xuống theo kiểu riêng của mình, trong trường hợp này thêm một lớp tùy chỉnh và quy tắc cho Dropdowns của bạn (Vì vậy mà bạn có trang web không giống như một trang web bootstrap :)) ví dụ: -

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>

Nguồn

2014-09-21 14:40:01 PSL

khá đơn giản (đối với những người biết làm thế nào :)) –

Câu trả lời này đã giúp vô cùng, nhưng tôi đã chạy vào một vấn đề mà nhận được chiều cao của phần tử ul ('$ (dropdownContainer.nodeName) .find ('. Dropdown-menu') .outerHeight() ') luôn bằng với chiều cao tối đa, ngay cả khi không đủ số lượng li để lấp đầy khoảng trống và kích hoạt thanh cuộn. Bất kỳ ý tưởng nào về lý do tại sao? – Ellesedil

@PSL cách dừng cuộn nền? – Shiva

Làm thế nào để xử lý danh sách lớn các mục trong góc thả xuống-ui?

Trả lời

Các vấn đề liên quan