[英]AngularJS typeahead giving [filter:notarray] error on Ajax GET query
I have an AngularJS 1.4.7 typeahead: 我提前输入了AngularJS 1.4.7:
<input type="text"
class="form-control simpleinput"
placeholder="keyword"
name="searchbarFormInput"
id="searchbarFormInput"
ng-model="selected"
ng-click="selected=null"
ng-enter="doBlur($event)"
uib-typeahead="record.display_name for record in getRecords($viewValue) | filter:{ display_name : $viewValue }"
typeahead-template-url="searchbar-result-template.html"
typeahead-on-select="selectRecord($item)"
typeahead-focus-on-select="false"
typeahead-editable="false"
autocomplete="off" />
This typeahead's controller calls getRecords(needle)
and filters on the provided needle
value ( $viewValue
, or whatever value is in the input
view): 这种预先输入的控制器调用getRecords(needle)
并过滤提供的needle
值( $viewValue
或input
视图中的任何值):
$scope.getRecords = function(needle) {
return $scope.testRecords;
}
Here, $scope.testRecords
is an array of test objects, eg: 在这里, $scope.testRecords
是测试对象的数组,例如:
$scope.testRecords = [ { "display_name" : "foo" } , { "display_name" : "bar" } ... ];
This works correctly. 这可以正常工作。 The typeahead will render a pulldown menu. 提前输入将显示一个下拉菜单。 The menu is filtered based on what I type into the input
field. 菜单会根据我在input
字段中键入的内容进行过滤。
Now I want to source this array of records from a GET query: 现在,我想从GET查询中获取此记录数组:
$scope.getRecords = function(needle) {
return $http.get('/search/by', {
params: {
'requestType' : 'searchByDisplayName',
'pageSize' : 1000
}
}).then(function(res) {
console.log(res.data.results);
return res.data.results;
});
}
This is a GET request to a route that works when called directly (confirmed via, for example, curl
or wget
). 这是对直接调用时有效的路由的GET请求(例如,通过curl
或wget
)。
Also, when I look at the browser console, console.log(res.data.results)
shows the correct array of objects — the exact same objects that are in the array $scope.testObjects
. 另外,当我查看浏览器控制台时, console.log(res.data.results)
显示正确的对象数组-与$scope.testObjects
数组中的对象完全相同。
However, I get no pulldown menu and I also get the following [filter:notarray]
error: 但是,我没有下拉菜单,并且还出现以下[filter:notarray]
错误:
Error: [filter:notarray] http://errors.angularjs.org/1.4.7/filter/notarray?p0=%7B%22%24%24state%22%3A%7B%22status%22%3A0%7D%7D
https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:6:421
https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:149:197
fn
R@https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min.js:11:6694
https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min.js:11:8633
$$parseAndValidate@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:263:425
$commitViewValue@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:263:284
https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:265:279
$eval@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:133:221
$apply@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:133:456
$$debounceViewValueCommit@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:265:249
$setViewValue@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:264:507
l@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:163:165
c@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:35:221
This error repeats for as many letters as I enter into the input
field. 当我在input
字段中输入时,此错误会重复出现多个字母。
What am I doing wrong with the request, typeahead, or typeahead filter, and how can I fix this? 我在处理请求,预输入或预输入过滤器时出了什么问题,该如何解决?
In your code that doesn't work you're returning a promise (the result of .then()), not the array: 在无效的代码中,您返回的是诺言(.then()的结果),而不是数组:
res.data.results
Edit: https://github.com/angular-ui/bootstrap/blob/master/src/typeahead/typeahead.js#L219 编辑: https : //github.com/angular-ui/bootstrap/blob/master/src/typeahead/typeahead.js#L219
Expects the result of the expression to yield an array and not a promise. 期望表达式的结果产生一个数组而不是一个Promise。 In other words, you should use the change event to trigger the function that updates your array via a promise, but the 'for record in nameOfAnArray' portion of the expression should not be the function. 换句话说,您应该使用change事件来触发通过promise更新数组的函数,但表达式的“ for record in nameOfAnArray”部分不应是该函数。 It should be a variable on the $scope. 它应该是$ scope上的变量。 When it changes it should trigger the digest and update. 更改时应触发摘要和更新。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.