typeahead angular ui - 无法读取未定义的属性“长度" [英] typeahead angular ui - cannot read property 'length' of undefined

问题描述

我正在为我的应用程序使用 Angular-ui Bootstrap.我使用 typeahead 指令.

I am using Angular-ui Bootstrap for my application. I use the typeahead directive.

html:

<input type="text" class="pass_code_input" ng-model="SuppPrefix" Typeahead="ddl_item.Text for ddl_item in getData($viewValue)"/>

控制器

function AutoCompleteCtrl($scope,$http, AutoCompleteSrv) {
    $scope.getData = function (prefix) {
        AutoCompleteSrv.GetAutoComplete("Supplier", prefix).then(function (result) {
            var results_arr = [];
            angular.forEach(result.data, function (item) {
                results_arr.push({ "Val": item.Val, "Text": item.Text });
            });
            return results_arr
        });  
    };
};

服务:

    function AutoCompleteSrv($http) {
    var _$http = $http;
    self = this;
    self.GetAutoComplete = function (DataType, Prefix) {
        var promise = _$http({
            method: "GET",
            url: 'api/AutoComplete',
            params: { 'DataType': DataType, 'Prefix': Prefix }
        }).success(function (data, status, headers, config) {

        }).error(function (data, status, headers, config) {

        });
        return promise;
    };
};

我确实收到了来自服务器的数据，但我无法在屏幕上显示它.当我在 chrome 开发工具中运行调试器时，出现下一个错误:

I do recieve the data from server, but I can't display it on the screen. When I run debugger in chrome dev tools, I get the next error:

TypeError: Cannot read property 'length' of undefined
at http://localhost:52145/js/libs/ui-bootstrap-tpls-0.11.0.min.js:13:12650
at m.promise.then.u (http://localhost:52145/js/angular/angular.min.js:97:280)
at m.promise.then.u (http://localhost:52145/js/angular/angular.min.js:97:280)
at http://localhost:52145/js/angular/angular.min.js:98:417
at h.$eval (http://localhost:52145/js/angular/angular.min.js:108:482)
at h.$digest (http://localhost:52145/js/angular/angular.min.js:106:62)
at h.$apply (http://localhost:52145/js/angular/angular.min.js:109:287)
at HTMLInputElement.l (http://localhost:52145/js/angular/angular.min.js:133:191)
at http://localhost:52145/js/angular/angular.min.js:31:32
at q (http://localhost:52145/js/angular/angular.min.js:7:386)

我在多个地方寻找解决方案，例如 ，并按照引导程序 ui 主页中的说明一步步操作.我做错了什么?

I've searched for solution in multiple places, like that, and also followed step by step the instructions in the bootstrap ui home page. What did I do wrong?

推荐答案

我刚遇到这个问题，就解决了.这里的关键是，在 angular 站点上给出的示例中，它们返回"了 $http 结果.这让人看起来很困惑，但最终重要的是回报.因此，在您的情况下，您将变量设置为该返回值，因此永远不会返回返回值.当您的代码以这种方式格式化时，您需要做两件事来更改它:首先是return"语句在错误的地方.第二个是返回值的声明也放错了地方.这是示例中的非工作代码:

I just ran into this and just solved it. The key here is that in the example given on the angular site they "return" the $http results. That makes it confusing to look at but ultimately that is the return that matters. So in your case you are setting a variable to that return value so the return never gets returned. When your code is formatted in this way you will need to do 2 things to change it: The first is that the "return" statement is in the wrong place. The second is that the declaration for the returned value is also in the wrong place. Here is the non-working code from the example:

.....
then(function(res){
      var addresses = [];
      angular.forEach(res.data.results, function(item){
        addresses.push(item.formatted_address);
      });
      return addresses;
    });

这是我如何更改它以使其正常工作.

Here is how I changed it to get it working.

var addresses = []
....
then(function(res){
      angular.forEach(res.data.results, function(item){
        addresses.push(item.formatted_address);
      });
    });
    return addresses;

如果您不使用then"而是使用success"和error"函数，这会变得更加清楚.然后很明显 return 语句应该在哪里以及返回值声明应该在哪里.以这种方式编写代码并使其工作是我解决问题的方法.请注意，您应该清除then"函数中的地址值，否则它只会继续附加越来越多的值.

This becomes more clear if you do not use the "then" but instead use the "success" and "error" functions. It then becomes obvious where the return statement should lie and where the returned value declaration should be. Writing the code that way and getting it to work is how I figured out the problem. NOTE that you should clear out the addressses value in the "then" function or else it will just keep appending more and more values.

这篇关于typeahead angular ui - 无法读取未定义的属性“长度"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！