Question

我试图在ui.bootstrap.typeahead上使用hack来添加下拉列表。黑客找到了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”相等。

当您输入

时，这也会“自动填充”

Answer 2

你的代码很好。您只需要在插件中添加此依赖项。

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

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

2 个答案: