AngularJS: scrollbaren typeahead Eingabefeld

Question

Mein HTML

<div class="form-group"> 
    <label class='control-label col-md-4' for='id_paymentCurrency'>{{'PAYMENT_CURRENCY' | translate}}</label> 
    <div class='col-md-4'> 
     <div id="scrollable-dropdown-menu"> 
     <input type="text" class="form-control" data-trim-value="false" ng-trim="false" id ='id_paymentCurrency' ng-model="vm.data.paymentCurrency" typeahead-append-to-body="true" required 
     typeahead-editable="false" 
     uib-typeahead="currency.code for currency in vm.getCurrencies($viewValue)"ng-disabled="disabled" /> 
    </div> 
    </div> 
</div> 

Meine CSS

#scrollable-dropdown-menu .tt-menu { 
    max-height: 150px; 
    overflow-y: auto; 
} 

I Winkel 1.x und typeahead bin mit, die mit Winkel bootsrap kommt, kann ich nicht machen Bildlaufleiste angezeigt.

http://fiddle.jshell.net/H7LA4/46/

Answer 1

Das Problem ist, mit dem Wähler. Versuchen Sie dieses:

#scrollable-dropdown-menu .dropdown-menu { 
    max-height: 150px; 
    overflow-y: auto; 
} 

Sie können prüfen, ob es in diesem fiddle wie erwartet funktioniert dieses

Answer 2

#scrollable-dropdown-menu ul { 
    max-height: 78px; 
    overflow-y: auto; 
} 

versuchen zu kommen Liste zu machen als scrolable

Answer 3

Das scheint folgende adaequat zu sein. Schauen Sie sich das Arbeitsbeispiel unter:

angular.module('myApp', ['ui.bootstrap']); 
 

 
function TypeaheadCtrl($scope) { 
 

 
    $scope.selected = undefined; 
 
    $scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', '49503', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming']; 
 
} 
 

 
angular.module('myApp').controller('TypeaheadCtrl', TypeaheadCtrl);

#scrollable-dropdown-menu .dropdown-menu { 
 
    max-height: 150px; 
 
    overflow-y: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script> 
 

 
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js" crossorigin="anonymous"></script> 
 

 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<div ng-app="myApp"> 
 
    <div class='container-fluid' ng-controller="TypeaheadCtrl"> <pre>State: {{selected| json}}</pre> 
 
    
 
     <div id="scrollable-dropdown-menu"> 
 
     <input class="input-large" type="text" ng-model="selected" uib-typeahead="state for state in states | filter:$viewValue | limitTo:8"> 
 
    </div> 
 
    </div> 
 
</div>