typeahead angular ui - 無法讀取未定義的屬性「長度」

我正在爲我的應用程序使用Angular-ui Bootstrap。我使用typeahead指令。typeahead angular ui - 無法讀取未定義的屬性「長度」

HTML：

<input type="text" class="pass_code_input" ng-model="SuppPrefix" Typeahead="ddl_item.Text for ddl_item in getData($viewValue)"/>

控制器

function AutoCompleteCtrl($scope,$http, AutoCompleteSrv) { 
    $scope.getData = function (prefix) { 
     AutoCompleteSrv.GetAutoComplete("Supplier", prefix).then(function (result) { 
      var results_arr = []; 
      angular.forEach(result.data, function (item) { 
       results_arr.push({ "Val": item.Val, "Text": item.Text }); 
      }); 
      return results_arr 
     }); 
    }; 
};

服務：

function AutoCompleteSrv($http) { 
    var _$http = $http; 
    self = this; 
    self.GetAutoComplete = function (DataType, Prefix) { 
     var promise = _$http({ 
      method: "GET", 
      url: 'api/AutoComplete', 
      params: { 'DataType': DataType, 'Prefix': Prefix } 
     }).success(function (data, status, headers, config) { 

     }).error(function (data, status, headers, config) { 

     }); 
     return promise; 
    }; 
};

我收到從數據服務器，但我無法在屏幕上顯示它。當我在Chrome瀏覽器開發工具來運行調試器，我得到了一個錯誤：

TypeError: Cannot read property 'length' of undefined 
at http://localhost:52145/js/libs/ui-bootstrap-tpls-0.11.0.min.js:13:12650 
at m.promise.then.u (http://localhost:52145/js/angular/angular.min.js:97:280) 
at m.promise.then.u (http://localhost:52145/js/angular/angular.min.js:97:280) 
at http://localhost:52145/js/angular/angular.min.js:98:417 
at h.$eval (http://localhost:52145/js/angular/angular.min.js:108:482) 
at h.$digest (http://localhost:52145/js/angular/angular.min.js:106:62) 
at h.$apply (http://localhost:52145/js/angular/angular.min.js:109:287) 
at HTMLInputElement.l (http://localhost:52145/js/angular/angular.min.js:133:191) 
at http://localhost:52145/js/angular/angular.min.js:31:32 
at q (http://localhost:52145/js/angular/angular.min.js:7:386)

我搜索了在多個地方的解決方案，如that，也跟着一步一步的引導用戶界面主頁上的說明進行操作。我做錯了什麼？

來源

2014-07-06 Lichte

你沒有成功返回數據的方法，但期望它在你的控制器 – harishr

我試過了，它沒有幫助。另外，當我調試時，我看到控制器中的數據（它帶有承諾）。數據甚至從控制器返回，但然後我得到這個錯誤。 – Lichte

你可以請安裝一個笨重的，會給你快速解決 – harishr

我剛碰到這個，就解決了它。這裏的關鍵是，在角度網站上給出的例子中，他們「返回」$ http結果。這讓人感到困惑，但最終這是重要的回報。所以在你的情況下，你正在爲該返回值設置一個變量，所以返回永遠不會返回。當你的代碼以這種方式格式化時，你需要做兩件事來改變它：第一個是「return」語句位置錯誤。第二個是返回值聲明也在錯誤的地方。下面是示例中的非工作代碼：

..... 
then(function(res){ 
     var addresses = []; 
     angular.forEach(res.data.results, function(item){ 
     addresses.push(item.formatted_address); 
     }); 
     return addresses; 
    });

下面是我如何改變它以使其工作。

var addresses = [] 
.... 
then(function(res){ 
     angular.forEach(res.data.results, function(item){ 
     addresses.push(item.formatted_address); 
     }); 
    }); 
    return addresses;

如果您不使用「then」，而是使用「success」和「error」函數，這會變得更加清晰。然後，很明顯返回聲明應該在哪裏以及返回值聲明應該在哪裏。以這種方式編寫代碼並使其運行正是我如何找出問題所在。請注意，您應該清除「then」函數中的地址值，否則它將繼續追加越來越多的值。

來源

2014-07-09 00:09:57 Scott

獲取相同的錯誤 - 現在已經持續了好幾個小時。上面的建議不爲我工作.. – Greg

這救了我。謝謝。 – Aravind

也救我了！ bleh關於承諾回報的良好經驗法則。（超級承諾）。 –

在您的服務中，您應該在回調函數.success()方法中返回數據。

來源

2014-07-06 12:10:36

我試過，但它沒有幫助。另外，當我調試時，我看到控制器中的數據（它帶有承諾）。數據甚至從控制器返回，但然後我得到這個錯誤。 – Lichte

我也看到了正在返回的對象的集合。而且我仍然遇到錯誤。 – Stephane

我也有這個問題。

對我來說，我讓我的控制器調用我的服務，然後與api交談來獲取我的數據。

即使獲取數據的工作（我能看到帶的console.log）被顯示在網頁上沒有從中選擇，而我得到的

cannot read property length of undefined

錯誤。

最後我意識到我需要將我的呼叫返回給服務。

//controller with code NOT working 
vm.getData = function(val, ep) { 

    myService.getData(val, ep) 
    .then(function(data){ 
    return data 
    }); 
}; 

//service 

this.getData = function(val, ep) { 
    return $http({ 
    //do http call here 
    }) 
    .then(function(data) { 
     //do what's needed with the data here 
     return data 
    }); 
};

認爲得到這個工作的修復：

//controller with code WORKING 
vm.getData = function(val, ep) { 

return myService.getData(val, ep) 
    .then(function(data){ 
    return data 
    }); 
};

所以，再一次，我只需要我的電話返回到該服務，然後將預輸入和預期一樣，並沒有更多的錯誤！

來源

2015-05-19 22:47:16 jsuser

謝謝，幫助我。 – vanzylv

typeahead angular ui - 無法讀取未定義的屬性「長度」

回答

相關問題