AngularJS：为什么我不能用箭头键从文本框中选择自动完成列表？

Question

我正在关注AngularJS API文档中的“typeahead”代码： http ： //angular-ui.github.io/bootstrap/

我可以通过按Enter键填充第一个选项的文本框，但出于某种原因，我无法通过箭头键（向上和向下）选择自动完成列表中的任何项目，但在他们的示例中，我可以。

这可能是什么问题？

**注意，这是一个Express项目，我正在使用Jade引擎。

头文件

link(rel='stylesheet', href='/css/bootstrap.css')
script(src='/js/jquery-2.1.1.min.js')
script(src='/js/angular.min.js')
script(src='/js/bootstrap.min.js')
script(src='/js/ui-bootstrap-tpls-0.11.0.min.js')
script(src='/js/index.js')

index.html中的部分代码

<div ng-controller="TypeaheadCtrl" class="col-md-5 ng-scope">
    <pre class="ng-binding">Model {{selected}}</pre>
    <input type="text" ng-model="selected" placeholder="item name" typeahead="item for item in items | filter:$viewValue | limitTo:8" class="form-control" >
</div>

index.js

var App = angular.module('myApp', ['ui.bootstrap']);
function TypeaheadCtrl( $scope, $http ) {
    $scope.selected = undefined;
    $scope.items = ['Chicken', 'Corn', 'Ice Cream', 'Cereal'];
}

在玩了一下之后，我发现我的浏览器还有另一个自动完成功能。 可能是铬自动填充？ 也许我的上下被用于此而不是用于我的网络应用程序？ 如果是这样，你将如何通过代码禁用它，所以我只能在此页面上使用它来进行角度自动完成？

Answer 1

尝试在<form>或<input>级别设置autocomplete="off" 。

可以在Mozilla的<input>部分找到autocomplete的文档

Answer 2

我发现了问题！ 我使用的AngularJS版本1.3.0（测试版）是错误的。 ng-mouseenter无法正常工作并更改所选索引。 我使用了AngularJS版本1.2.19（最新的稳定版本），它现在完美运行。

问题示例（v1.3.0 beta-14） http://plnkr.co/edit/PazPIkWAce6e59OEmn7n?p=preview

<script src="https://code.angularjs.org/1.3.0-beta.14/angular.js"></script>

工作实例（v1.2.19稳定版） http://plnkr.co/edit/pkbcsaPyJEJbCYVcZYpB?p=preview

<script src="https://code.angularjs.org/1.2.19/angular.min.js"></script>

Answer 3

我必须在ui-bootstrap-tpls-0.11.0.js中进行此更改才能正常工作

 angular.module("template/typeahead/typeahead-popup.html", []).run(["$templateCache", function($templ
 $templateCache.put("template/typeahead/typeahead-popup.html",
-    "<ul class=\"dropdown-menu\" ng-if=\"isOpen()\" ng-style=\"{top: position.top+'px', left: positi
+    "<ul class=\"dropdown-menu\" ng-show=\"isOpen()\" ng-style=\"{top: position.top+'px', left: posi

更改ng-if到ng-show修复它