AngularJS：可滚动的预输入字段

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;
 }

我正在使用 angular 1.x 和 angular-bootsrap 附带的 typeahead，我无法使滚动条出现。

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

Answer 1

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

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

您可以在此 fiddle

中检查它是否按预期工作

Answer 2

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

试试这个使即将到来的列表可滚动

Answer 3

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

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>

AngularJS：可滚动的预输入字段

AngularJS: scrollable typeahead input field

css

angularjs

bootstrap-typeahead

typeahead.js

twitter-typeahead