Question

我的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>

我的CSS

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

我使用角度 - 靴子附带的角度1.x和打字，我无法使滚动条出现。

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

Answer 1

问题在于您的选择器。试试这个：

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

您可以在此fiddle

中检查它是否按预期工作

Answer 2

以下似乎工作正常。检查下面的工作示例：

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>

Answer 3

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

尝试将此列表作为可扫描的

AngularJS：可滚动的预输入字段

3 个答案: