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
}
});
};

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

Answer 1

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

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

Answer 2

您在getPatient()收到的val，您的函数可以返回null值。因此当typeahead在null对象上调用length属性时。我想你可以通过在调用webservice之前添加一个检查并在输入为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。你如何搜索params？通常你发送params不像：

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;
};

`

Updated Demo

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

4 个答案: