javascript - Angularjs Typeahead 不显示下拉菜单

Question

我正在尝试使用异步预输入，我可以很好地获取数据，并且检查器清楚地显示正在返回的数据。例如我正在使用 getLocation

的引导示例

$scope.getLocation = function(val) {
    return $http.get('//maps.googleapis.com/maps/api/geocode/json', {
      params: {
        address: val,
        sensor: false
      }
    }).then(function(response){
      return response.data.results.map(function(item){
        return item.formatted_address;
      });
    });
  };

这正是我想要的，这就是我的方法。

$scope.filterClients =function(val) {
        var data = $.param({
            action: "filter_clients",
            value: val
        });
        var config = {headers : {'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'}}

        $http.post('http://***************.co.uk/switchboard.php', data, config)
            .then(function (response) {
                return response.data.map(function(item){
                    return item.first_name;
                  });
            });  
    };

HTML 代码

<input ng-model="asyncSelected" placeholder="Select a Client" uib-typeahead="first_name for first_name in filterClients($viewValue)" class="form-control"/>

Answer 1

您不会从 $scope.filterClients 返回任何内容。只需像这样更改您的功能即可:

$scope.filterClients = function (val) {
    var data = $.param({
        action: "filter_clients",
        value: val
    });
    var config = {headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'}}

    return $http.post('http://***************.co.uk/switchboard.php', data, config)
            .then(function (response) {
                return response.data.map(function (item) {
                    return item.first_name;
                });
            });
};

注意

在返回数据之前最好确保一切正常，否则可能会出现错误。尝试这样的方法以避免错误:

return $http.post('http://***************.co.uk/switchboard.php', data, config).then(function (response) {
    if (!angular.isObject(response) || !angular.isDefined(response.data)) {
        /* this you can put to avoid any errors */
        return;
    }

    /* if you want to limit you can use this code */
    var limit = 10;
    var data = [];
    for (var i = 0; i < response.data.length; i++) {
        if (i == limit) {
            break;
        }
        data.push(response.data[i]);
    }

    return data;
});