使用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 Albany」和「New York」以供選擇。我想看到狀態A中的同一個列表。

在帶有真正服務器的typeahead-on-select上，我能夠讓服務器發送新列表（'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(); 
}; 

該代碼很可能得到改善相當多 - 目前，我無法讓下拉到停止顯示。但它做到了你想要的。

Plunkr here。