Question

我需要使用typeahead进行http调用来获取建议选项

$scope.getlist = function getListofNames(name) {
 return $http({
   method: 'GET',
     url: '/v1/'+name,
     data: ""
 }).then(function(response){

     if(response.data.statusMessage !== 'SUCCESS'){
         response.errorMessage = "Error while processing request. Please retry."
           return response;
     }

         else {
           return response.data.payload;
         }

       }, function(response){
       response.errorMessage = "Error while processing request"
           return response;
       }
       );
}

response.data.payload是一个对象数组，它已成功获取但我收到此错误错误：[filter：notarray] http://errors.angularjs.org/1.4.5/filter/notarray？

注意：我使用的是角1.4.5和Bootstrap v3.1.1

Answer 1

我猜你的预先标记是这样的：

<input [...] typeahead="item in getItems($viewValue) | filter: $viewValue">

为什么它不起作用：

当项目数组异步提取时，会出现问题。在您的情况下，getItems函数称为getListofNames，由于调用$http，您的项目确实是异步提取的。因此，在发生错误时， getListofNames（）仍然是未解析的承诺对象，还不是名称数组。

你怎么能做到这一点：

从模板中删除过滤器。您应该在getItems中返回数组之前对其进行过滤。 理想情况下，您希望执行过滤服务器端。实际上，服务器接收用户键入的子字符串（这是$viewValue参数），因此它具有过滤数组的所有数据。这样可以防止返回所有元素并缩短响应时间。或者，您可以在promise的回调中过滤客户端：

$scope.getList = function getListofNames(name) {
    return $http(...}).then(
        function(response){
            // filter response.data.payload according to 
            // the 'name' ($viewValue) substring entered by the user
            return filteredArray; // <- no need to pipe a filter in the template anymore
        }
    );
};

Angularjs bootstrap typeahead无效：错误：[filter：notarray]

1 个答案:

为什么它不起作用：

你怎么能做到这一点：