Come gestire il grande elenco di elementi in elenco a discesa angolare-ui?

Io uso angular-ui drop down Come gestire il grande elenco di elementi in elenco a discesa angolare-ui?

Funziona bene ma non ho idea di come gestire più elementi nel menu a discesa.

consideri seguente esempio 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>

voglio definire di scorrimento e impostare discesa più breve.

Qualche idea?

fonte

2014-09-21 snaggs

Si potrebbe semplicemente avere una regola css per definirlo, per 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

O, in generale, si consiglia l'applicazione per avere una propria discesa in stile, in questi casi aggiungere una classe personalizzata e la regola per il vostro menù a discesa (in modo che il vostro sito web non sembra un sito web bootstrap :)) un esempio: -

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>

fonte

2014-09-21 14:40:01 PSL

piuttosto semplice (per chissà come :)) –

Questa risposta ha aiutato immensamente, ma ho incontrato un problema per ottenere l'altezza dell'elemento ul ('$ (dropdownContainer.nodeName) .find ('. Dropdown-menu')) .outerHeight() ') è sempre uguale all'altezza massima, anche se non c'è abbastanza spazio per riempire lo spazio e attivare le barre di scorrimento. Qualche idea sul perché? – Ellesedil

@PSL come interrompere lo scorrimento dello sfondo? – Shiva

Come gestire il grande elenco di elementi in elenco a discesa angolare-ui?

risposta

Problemi correlati