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修復它