Question

我有一个AngularJS 1.4.7 typeahead：

<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" />

此类型的控制器调用getRecords(needle)并过滤所提供的needle值（$viewValue，或input视图中的任何值）：

$scope.getRecords = function(needle) {
    return $scope.testRecords;
}

这里，$scope.testRecords是一个测试对象数组，例如：

$scope.testRecords = [ { "display_name" : "foo" } , { "display_name" : "bar" } ... ];

这可以正常工作。预先输入将呈现下拉菜单。根据我在input字段中输入的内容过滤菜单。

现在我想从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;
    });
}

这是对直接调用的路径的GET请求（例如，通过curl或wget确认）。

此外，当我查看浏览器控制台时，console.log(res.data.results)显示正确的对象数组 - 与数组$scope.testObjects中完全相同的对象。

但是，我没有下拉菜单，我也收到以下[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

当我输入input字段时，会出现与此字母数一样多的字母。

我对request，typeahead或typeahead过滤器做错了什么，我该如何解决？

Answer 1

在你的代码不起作用的情况下，你将返回一个promise（结果为.then（）），而不是数组：

res.data.results

修改 https://github.com/angular-ui/bootstrap/blob/master/src/typeahead/typeahead.js#L219

期望表达式的结果产生数组而不是promise。换句话说，您应该使用change事件来触发通过promise更新数组的函数，但表达式中的'for nameOfAnArray'部分不应该是函数。它应该是$ scope的变量。当它改变时，它应该触发摘要并更新。

AngularJS typeahead在Ajax GET查询上给出[filter：notarray]错误

1 个答案: