Angularjs Typeahead 指令 - 错误：无法读取未定义的属性'length'"

Question

我使用Angularjs Bootstrap Typeahead指令，遇到一个错误，显示如下：

错误

TypeError: Cannot read property 'length' of undefined
at ui-bootstrap-tpls-0.12.1.min.js:9
at angular.min.js:112
at l.$get.l.$eval (angular.min.js:125)
at l.$get.l.$digest (angular.min.js:122)
at l.$get.l.$apply (angular.min.js:126)

下面是我的HTML

<h4>Asynchronous results</h4>
<pre>Model: {{asyncSelected | json}}</pre>
<input type="text" ng-model="asyncSelected" placeholder="Patients loaded via $http" typeahead="result as result.patient.drug.drugindication for result in getPatient($viewValue)" typeahead-loading="loadingPatients" class="form-control">
<i ng-show="loadingPatients" class="glyphicon glyphicon-refresh"></i>

Javascript

$scope.getPatient = function(val) {
return $http.get('https://api.fda.gov/drug/event.json', {
  params: {
    search: 'patient.drug.drugindication:' + val
  }
}).then(function(response){
  return 
  { 
    search: response.data
}
});
};

Codepenhttp://codepen.io/anon/pen/XJBNEq?editors=101

Answer 1

您只需要返回promise本身。不要使用.then（）

    $scope.getPatient = function(val) {
return $http.get('https://api.fda.gov/drug/event.json', {
  params: {
    search: 'patient.drug.drugindication:' + val
  }
})
};

Answer 2

您的val在getPatient()中收到，并且您的函数可以返回null值。因此当typeahead在null对象上调用CCD_ 2属性时。我认为您可以通过在调用Web服务之前添加一个检查来修复它，并在输入为null时返回一个空数组。

$scope.getPatient = function(val) {
if(!val) { //directly return an empty array if val is null, or empty string
    return [];
}
return $http.get('https://api.fda.gov/drug/event.json', {
  params: {
    search: 'patient.drug.drugindication:' + val
  }
}).then(function(response){
  return 
  { 
    search: response.data
}
});
};

Answer 3

我编写的代码对我有效。$http restuns承诺哪个结果应该写入您的控制器范围。

$scope.getPatient = function(val) {
var data = $http.get('https://api.fda.gov/drug/event.json', {
  params: {
    search: 'patient.drug.drugindication:' + val
  }
});
data.then(function(response){
    if ( response.data != null ) 
        $scope.asyncSelected = response.data;
    else
        $scope.asyncSelected = [];
});
};

注意结果为空。同时在作用域中设置正确的名称。如果数据没有更改，请为asyncSelected设置$watch。你如何搜索参数？通常你发送的参数不喜欢：

search: 'patient.drug.drugindication:' + val

但是

'patient.drug.drugindication': + val
params { 
key: value,
key2: value2
}

Answer 4

您忘记了

return data;

在中

$scope.getPatient = function(val) {
    var data = $http.get('https://api.fda.gov/drug/event.json', {
          params: {
            search: 'patient.drug.drugindication:' + val
      }
    });
    data.then(function(response){
        $scope.gotresults = response.data.results;
        console.log($scope.gotresults)
        if ( response.data != null ) {
            $scope.asyncSelected = response.data.results;
        }
        else {
            $scope.asyncSelected = [];
        }
    });
  return data;
};

`

更新的演示