向上/向下箭头键问题与typeahead控件(角度引导UI) [英] up/down arrow key issue with typeahead control (angular bootstrap UI)
问题描述
请查看此
在这我已经覆盖ui-bootstrap typeahead建议在 answer 。
以下是我需要改变的工作:
在中添加以下行:typeaheadMatch
directive(plunker中的ui.bootstrap.typeahead.js文件的第 - 335行)
元素[0]。焦点();
添加 shouldFocus
指令350)
.directive('shouldFocus',function(){
return {
restrict:
link:function(scope,element,attrs){
scope。$ watch(attrs.shouldFocus,function(newVal,oldVal){
element [0] .scrollIntoView );
});
}
};
})
,最后在 li
(第372行)中添加指令
should-focus = \isActive($ index)\
Check this PLNKR , i have implemented typeahead control, By default in type ahead control they are not setting any max-height or height to list, but as per requirement i have to fix height of list to 110px. So, when we have longer list at a time only 4 data will be shown and rest can be seen by scrolling down. Scrolling is working while user click on scroll up/down arrows, but it's not working with keyboard up/down keys.
The problem is explained in steps:-
- Type something i.e "a" to get data in typeahead (list will be populated)
- Press down-arrow key (focus will be on list item)
- Press down-arrow key 4-5 time to go further down (When we traverse down to list, scroll is not getting moved.)
- It always show top 4 items in list. Ideal behavior is it should shift.
User is able to scroll by clicking on scroll manually but with arrow key it's not scrolling.
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'];
In this I have override ui-bootstrap typeahead as suggested in the answer.
Following are the changes I need to make it work:
Added following line in typeaheadMatch
directive (line - 335 of ui.bootstrap.typeahead.js file in the plunker)
element[0].focus();
Added shouldFocus
directive (line - 314 -350)
.directive('shouldFocus', function(){
return {
restrict: 'A',
link: function(scope,element,attrs){
scope.$watch(attrs.shouldFocus,function(newVal,oldVal){
element[0].scrollIntoView(false);
});
}
};
})
and finally added directive in li
(line - 372)
should-focus=\"isActive($index)\"
这篇关于向上/向下箭头键问题与typeahead控件(角度引导UI)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!