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>
是啊,但我不会将其设置为所有的下拉菜单,所以它应该是这样的#可滚动下拉菜单.typeahead { – Damiano
@Damiano是实际上,元素的id应该被添加 – Akis