Angjular JS - 多个输入字段破坏 ui.bootstrap.typeahead 上的下拉黑客攻击

Question

我正在尝试使用 ui.bootstrap.typeahead 上的技巧来添加下拉菜单。黑客发现 here。它将在输入字段中单击鼠标打开一个下拉菜单。我让它在输入字段上工作，但是当添加如下所示的第二个输入时，下拉列表停止工作。

<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 的新手，我无法弄清楚问题是什么以及如何解决它。任何想法将不胜感激。

Answer 1

这是一种更简洁的方法（如果可以使用 html5）。首先创建一个datalist

    <datalist id="items">
       <option ng-repeat="item in items" value="{{item.someValue}}"> </option>
    </datalist>

然后供您输入。

<input class="input-sm form-control" id="itemsInput" type="search" list="items" />

只需确保 list="x" 和 datalist id="x" 相等即可。

这也会在您键入时 "autocomplete"

Answer 2

你的代码没问题。您只需要在 plunk 中添加此依赖项。

<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>

Angjular JS - 多个输入字段破坏 ui.bootstrap.typeahead 上的下拉黑客攻击

Angjular JS - multiple input fields breaks dropdown hack on ui.bootstrap.typeahead

angularjs

angular-ui-bootstrap