檢查這個PLNKR,我已經實現預輸入控制, 默認情況下,在提前鍵入控制他們不設置任何最大高度或高度列出,但根據要求,我必須修復列表的高度爲110px。所以,當我們有一個更長的列表時,只有4個數據將被顯示,其餘可以通過向下滾動來看到。 當用戶點擊向上/向下滾動箭頭時,滾動正在工作,但它不適用於鍵盤上/下鍵。上/下箭頭鍵的問題與鍵盤緩衝控制(角度引導UI)
的問題在步驟解釋: -
- 類型的東西,即「一」的預輸入獲得的數據(將被填充的列表)
- 按下箭頭鍵(重點將放在列表項)
- 按下箭頭鍵4-5的時間去進一步下降(當我們穿越 到列表,滾動中,無法移動。)
- 它總是在列表中顯示前4項。理想的行爲是它應該改變。
用戶可以通過手動點擊滾動進行滾動,但使用箭頭鍵則不能滾動。
HTML
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class='container-fluid' ng-controller="TypeaheadCtrl">
<h4>Static arrays</h4>
<pre>Model: {{selected | json}}</pre>
<input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control">
</div>
</body>
</html>
CSS
.dropdown-menu{
height:110px;
overflow:auto;
}
JavaScript的數據列表
$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', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];
對我來說它的工作(鉻)使用 – maioman
@maioman米鉻(版本39.0.2171.95米),它不起作用。 – ankitd
我錯了它不是 - 檢查[$ anchorScroll](https://docs.angularjs.org/api/ng/service/$anchorScroll) – maioman