javascript AngularUI-Bootstrap 的 Typeahead 无法读取 `undefined` 的 `length` 属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19525184/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularUI-Bootstrap's Typeahead Can't Read `length` Property of `undefined`
提问by Evil Closet Monkey
I am getting the following error when I attempt to get a typeahead values from AngularUI-Bootstrap, using a promise.
当我尝试使用承诺从 AngularUI-Bootstrap 获取预先输入的值时，出现以下错误。
TypeError: Cannot read property 'length' of undefined
at http://localhost:8000/static/js/ui-bootstrap-tpls-0.6.0.min.js:1:37982
at i (http://localhost:8000/static/js/angular.min.js:79:437)
at i (http://localhost:8000/static/js/angular.min.js:79:437)
at http://localhost:8000/static/js/angular.min.js:80:485
at Object.e.$eval (http://localhost:8000/static/js/angular.min.js:92:272)
at Object.e.$digest (http://localhost:8000/static/js/angular.min.js:90:142)
at Object.e.$apply (http://localhost:8000/static/js/angular.min.js:92:431)
at HTMLInputElement.Va.i (http://localhost:8000/static/js/angular.min.js:120:156)
at HTMLInputElement.x.event.dispatch (http://localhost:8000/static/js/jquery-1.10.2.min.js:5:14129)
at HTMLInputElement.v.handle (http://localhost:8000/static/js/jquery-1.10.2.min.js:5:10866)
My HTML tag is:
我的 HTML 标签是：
<input type="text" class="form-control" id="guestName" ng-model="name" typeahead="name for name in getTypeaheadValues($viewValue)">
With my getTypeaheadValuesfunction doing the following:
我的getTypeaheadValues函数执行以下操作：
$scope.getTypeaheadValues = function($viewValue)
{
// return ['1','2','3','4'];
$http({
method: 'GET',
url: 'api/v1/person?name__icontains=' + $viewValue
}).error(function ($data) {
console.log("failed to fetch typeahead data");
}).success(function ($data) {
var output = [];
$data.objects.forEach(function (person)
{
output.push(person.name);
});
console.log(output);
return output;
});
}
I do not understand what AngularUI-Bootstrap is complaining about as being undefined. If I remove the comment on the top-most returnthe values show up fine. The console.logoutput in the successalso return all the values I'm expecting in an array.
我不明白 AngularUI-Bootstrap 抱怨什么是未定义的。如果我删除最顶部的评论，return则值显示正常。中的console.log输出success还返回我在数组中期望的所有值。
What am I missing that would cause AngularUI-Bootstrap not see the returned array?
我错过了什么会导致 AngularUI-Bootstrap 看不到返回的数组？
回答by Evil Closet Monkey
This problem was two fold.
这个问题是双重的。
The first is that I was not returning the promise event (the $httpcall). The lack of a return statement (as @tobo points out) is what was causing the error directly. I needed to be returning the promise though, not the array.
首先是我没有返回承诺事件（$http调用）。缺少 return 语句（正如@tobo 指出的那样）是直接导致错误的原因。不过，我需要返回承诺，而不是数组。
The second is that I need to be using .thenrather than .successfor AngularUI-Bootstrap to pick up the results.
第二个是我需要使用.then而不是.successAngularUI-Bootstrap 来获取结果。
I ran across the following question: How to tie angular-ui's typeahead with a server via $http for server side optimization?
我遇到了以下问题： 如何通过 $http 将 angular-ui 的预先输入与服务器绑定以进行服务器端优化？
Which updated my function call to the below:
这将我的函数调用更新为以下内容：
$scope.getTypeaheadValues = function($viewValue)
{
return $http({
method: 'GET',
url: 'api/v1/person?name__icontains=' + $viewValue
}).then(function ($response) {
var output = [];
console.log($data);
$response.data.objects.forEach(function (person)
{
output.push(person.name);
});
console.log(output);
return output;
});
}
回答by T.Riemer
$scope.getTypeaheadValues is not returning any array. It returns null, because your return statement is in the callback function "success", which is called asynchrony.
$scope.getTypeaheadValues 不返回任何数组。它返回 null，因为你的 return 语句在回调函数“success”中，它被称为异步。
Maybe this will work:
也许这会奏效：
$scope.getTypeaheadValues = function($viewValue)
{
var output = [];
$http({
method: 'GET',
url: 'api/v1/person?name__icontains=' + $viewValue
}).error(function ($data) {
console.log("failed to fetch typeahead data");
}).success(function ($data) {
$data.objects.forEach(function (person)
{
output.push(person.name);
});
console.log(output);
});
return output;
}
回答by Ankit Shukla
$scope.getTypeaheadValues = function($viewValue)
{
var someOutput="";//return something
$http({
method: 'GET',
url: 'api/v1/person?name__icontains=' + $viewValue
}).error(function (data) {
console.error(data);
}).success(function (data) {
console.log(data);//Do whatever you want
});
return someOutput;
}
}
//The return statement is missing
//缺少return语句
