我正在尝试对ui.bootstrap.typeahead进行黑客攻击以添加下拉列表。黑客发现在这里。在输入字段中单击鼠标会打开一个下拉列表。我可以在输入字段上使用它,但是当添加如下所示的第二个输入时,下拉列表将停止工作。
<input type="text" ng-model="selected" typeahead="item for item in items | filter:$viewValue:emptyOrMatch | limitTo:8" typeahead-focus >
<input type="text" ng-model="selected_2" typeahead="item for item in items | filter:$viewValue:emptyOrMatch | limitTo:8" typeahead-focus >
这里是一个plunker来说明问题。删除第二个输入,下拉菜单将起作用。我已经看过了指令的范围,但是我是Angular的新手,我无法弄清楚问题出在哪里以及如何解决它。任何想法,将不胜感激。
您的代码很好。您只需要在您的插件中添加此依赖项即可。
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
这将使您的下拉菜单浮动在输入字段的顶部,而不是被它们阻止。
这是下面的整个Index.HTML。或者,在此处查看我的Plunk:http ://plnkr.co/edit/X4lSmQ?p=preview
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js@*" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
<script data-require="ui-bootstrap@*" data-semver="0.12.1" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js"></script>
<script src="script.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<h1>Dropdown!</h1>
<div>
<div class="container-fluid" ng-controller="TypeaheadCtrl">
<div class="form-group">
<input type="text" ng-model="selected" typeahead="item for item in items | filter:$viewValue:emptyOrMatch | limitTo:8" typeahead-focus="" />{{selected}}
<br />
<!-- if following line is removed the dropdown works agina.-->
<input class="col-lg-offset-4" type="text" ng-model="selected_2" typeahead="item for item in items | filter:$viewValue:emptyOrMatch | limitTo:8" typeahead-focus="" />{{selected_2}}
</div>
</div>
</div>
</body>
</html>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句