在AngularJS应用程序中使用预输入和Ajax [英] Using typeahead and ajax in a AngularJS app

问题描述

我在使用引导程序的UI与动态数据预输入控制（数据来自AJAX调用获取）的问题。

I am having issues using Bootstrap-UI's typeahead control with dynamic data (data fetched from ajax call).

在我服务的响应看起来有点像这样 [{ID：1，文本：somebrand'}，{ID：2，文本：'东西'}]

The response in my service looks a bit like this [{id:1, text:'somebrand'},{id:2, text:'something'}]

中的HTML如下：

<input type="text" ng-model="result" min-length="2" typeahead="brand.id as brand.text for brand in brands($viewValue)" style="display:block">

在我的控制器我找回这样的内容：

And in my controller I retrieve the content like this:

$scope.brands = function(brandName){
        $http.post('/brands/getbrandsviewmodel', { query : brandName}).then(function(response){
            return limitToFilter(response.data, 15);
        });
    };

我遇到的问题是在引导的UI这样的错误：

The issue I run into is an error in Bootstrap-UI like this:

 Cannot read property 'length' of undefined
at http://localhost:3000/assets/ui-bootstrap-tpls-0.4.0.js?body=1:2749:24

当我调试到引导的UI code我看到错误这里occures，这是不确定的匹配：

When I debug into the Bootstrap-UI code I see that the error occures here, and that matches is undefined:

//it might happen that several async queries were in progress if a user were typing fast
          //but we are interested only in responses that correspond to the current view value
          if (inputValue === modelCtrl.$viewValue) {
            if (matches.length > 0) {....

我最初的反应是，当数据被检索引导-UI的预输入是不知道，但我不知道为什么，因为我使用的承诺？

My initial reaction is that Bootstrap-UI's typeahead isn't aware when the data is retrieved, but I don't know why, since I am using promises?

推荐答案

您需要实际的收益的从你的品牌功能的承诺。试试这个：

You need to actually return a promise from your brands function. Try this:

$scope.brands = function(brandName){
       return $http.post('/brands/getbrandsviewmodel', { query : brandName})
                     .then(function(response){
                        return limitToFilter(response.data, 15);
                      });
    };

这篇关于在AngularJS应用程序中使用预输入和Ajax的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！