angularjs - typeahead Angular ui - 无法读取未定义的属性 'length'

Question

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

html:

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

Controller

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 开发工具中运行调试器时，出现下一个错误:

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)

我在多个地方搜索了解决方案，例如 that ，并且还一步步按照 bootstrap ui 主页中的说明进行操作。我做错了什么？

Answer 1

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

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

以下是我如何更改它以使其正常工作。

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

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