类型控制的上/下箭头键问题(angular bootstrap UI)
ank*_*itd 9 css twitter-bootstrap angular-bootstrap
勾选此PLNKR,我已经实现预输入控制,默认情况下,在未来型控制它们不设置任何最大高度或高度列出,但按规定我必须修复列表的高度110px.因此,当我们一次列出更长的列表时,只会显示4个数据,并且可以通过向下滚动看到休息.用户单击向上/向下滚动箭头时滚动正在工作,但它不能使用键盘向上/向下键.
该问题按步骤解释: -
- 键入一些东西,即"a",以获取typeahead中的数据(将填充列表)
- 按向下箭头键(焦点将在列表项上)
- 按向下箭头键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 datalist
$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'];
在这里我按照答案中的建议覆盖了ui-bootstrap typeahead .
以下是我需要做的改变:
在typeaheadMatch指令中添加了以下行(在plunker中的ui.bootstrap.typeahead.js文件的第335行)
element[0].focus();
添加shouldFocus指令(行 - 314 -350)
.directive('shouldFocus', function(){
return {
restrict: 'A',
link: function(scope,element,attrs){
scope.$watch(attrs.shouldFocus,function(newVal,oldVal){
element[0].scrollIntoView(false);
});
}
};
})
最后添加了指令li(第372行)
should-focus=\"isActive($index)\"
@ user1690588答案效果很好.唯一的问题是,当列表中的最后一项处于活动状态并按下向下键时.scrollToView到第一个项目不起作用.我添加了一个检查以确保newVal为true,这似乎解决了这个问题.
if (newVal) {
element[0].scrollIntoView(false);
}
http://plnkr.co/edit/05yoHSlhvX740tgiRRXm
| 归档时间： |
|
| 查看次数： |
11966 次 |
| 最近记录： |