javascript - 无法在 Angular UI Bootstrap 中使用 typeahead-on-select

Question

参见 Plunker:http://plnkr.co/edit/hsxYC2KPsf7S3non34Cy .

HTML:

<input type="text" ng-model="result" typeahead="suggestion for suggestion in cities($viewValue)" typeahead-on-select="onSelect($item)">

JavaScript:

$scope.cities = function(cityName) {
    $scope.city = cityName.split(" ");
       // $timeout emulates an async call to a server.
       return $timeout(function() {
            switch ($scope.city[0]) {
                case 'N':
                    return {cand: ["New"]};
                case 'New':
                    return {cand: ["New Albany", "New York"]};
                default:
                    return {cand: ["<no match>"]};
            }
        }, 1000).then(function(res) {
            return res.cand;
        });
  };

  $scope.onSelect = function($item) {
      $scope.cities($item);
  };

输入“N”，等待 1 秒。出现打字头列表，选择“新建”(状态 A)。该列表消失了，没有新的提案。按空格键，仍然没有预输入列表。

所需行为的演示:将“New”作为输入。将显示预输入列表，其中包含可供选择的“新奥尔巴尼”和“纽约”。我想在 A 州看到相同的列表。

在使用真正的服务器进行 typeahead-on-select 时，我能够让服务器发送新列表(“新奥尔巴尼”和“纽约”)，但问题是 Angular 不显示列表.

Answer 1

经过一番摆弄后，您似乎需要显式设置 $viewValue 并让 Angular 为您渲染它，就像通常一样:

$scope.onSelect = function($item) {
   var theInput = angular.element(document.querySelector('#theInput'));
    var ngModelCtrl = theInput.controller('ngModel');

    ngModelCtrl.$setViewValue($item);
    ngModelCtrl.$render();
};

这段代码可能可以改进很多 - 目前，我无法让下拉列表停止显示。但它可以满足您的要求。

Plunkr here .