在AngularJS應用中使用typeahead和ajax

Question

我在使用Bootstrap-UI的typeahead控件和動態數據（從ajax調用中獲取數據）時遇到問題。

在我服務的響應看起來有點像這樣[{id:1, text:'somebrand'},{id:2, text:'something'}]

的HTML看起來像這樣：

<input type="text" ng-model="result" min-length="2" typeahead="brand.id as brand.text for brand in brands($viewValue)" style="display:block"> 

在我控制我找回這樣的內容：

$scope.brands = function(brandName){ 
     $http.post('/brands/getbrandsviewmodel', { query : brandName}).then(function(response){ 
      return limitToFilter(response.data, 15); 
     }); 
    }; 

我遇到的問題是Bootstrap-UI中的錯誤，如下所示：

Cannot read property 'length' of undefined 
at http://localhost:3000/assets/ui-bootstrap-tpls-0.4.0.js?body=1:2749:24 

當我調試到引導的UI代碼，我看到錯誤這裏occures，這是未定義匹配：

//it might happen that several async queries were in progress if a user were typing fast 
      //but we are interested only in responses that correspond to the current view value 
      if (inputValue === modelCtrl.$viewValue) { 
      if (matches.length > 0) {.... 

我最初的反應是，引導-UI的預輸入不知道當數據被檢索到，但我不知道爲什麼，因爲我使用的是承諾？

Answer 1

您需要實際上返回承諾從您的brands函數。試試這個：

$scope.brands = function(brandName){ 
     return $http.post('/brands/getbrandsviewmodel', { query : brandName}) 
        .then(function(response){ 
         return limitToFilter(response.data, 15); 
         }); 
    };