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 Albany”和“New York”以供选择。我想在A国看到相同的清单。

在使用真实服务器进行类型选择时，我可以让服务器发送新列表（'New Albany'和'New York'），但问题是Angular不显示列表

Answer 1

经过一番摆弄后，您似乎需要明确地设置 $ viewValue 并让角度为您呈现，因为它通常是这样的：

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

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

这段代码可能会有相当大的改进 - 目前，我无法将下拉列表显示为STOP。但它可以做你想要的。

Plunkr here。

无法使用Angular UI Bootstrap进行typeahead-on-select

1 个答案: