Angularjs Typeahead没有显示下拉列表

时间:2017-03-30 09:13:44

标签: javascript php angularjs json

我正在尝试使用异步类型,我可以获得正确的数据,并且检查员清楚地显示返回的数据。例如,我正在使用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 CODE

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

1 个答案:

答案 0 :(得分: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;
});