类型控制的上/下箭头键问题(angular bootstrap UI)

勾选此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>

Run Code Online (Sandbox Code Playgroud)

CSS

.dropdown-menu{
 height:110px;
 overflow:auto;
}

Run Code Online (Sandbox Code Playgroud)

javascript datalist

$scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', …

Run Code Online (Sandbox Code Playgroud)

css twitter-bootstrap angular-bootstrap

ank*_*itd

2015 01-09

9
推荐指数

2
解决办法

1万
查看次数

angularjs中'getElementById'的替代品

检查这个PLNKR,我有一个带有id的列表myMenuList,这个id正在访问script.js以显示Numer of li和UL width通过$scope.mml = angular.element(document.getElementById('myMenuList'));.但根据要求,我不应该像这样在控制器中访问它.我们可以通过保持相同的行为来做任何替代方案吗？

HTML代码

  <div class="menucontainer left">
   <ul id="myMenuList" ng-style="myStyle">
     <li ng-repeat="item in items"> <a href="#">{{item.name}}</a>        </li>
   </ul>
 </div>

Run Code Online (Sandbox Code Playgroud)

JavaScript的

 $scope.mml = angular.element(document.getElementById('myMenuList'));
 $timeout(function() {
   $scope.numerofli = $scope.mml.find('li').length;
    $scope.ulwidth = $scope.mml[0].clientWidth;
 }, 1000);

Run Code Online (Sandbox Code Playgroud)

html css angularjs

ank*_*itd

lucky-day

6
推荐指数

2
解决办法

6万
查看次数