如何通过 Parse API 使用 Angular UI Typeahead？

Question

我想通过使用 Parse API 从远程数据库获取结果来实现 Typeahead（自动完成）功能，我尝试按照以下方式实现它，我正在获取 JSON 数组，但无法将其显示为下拉列表。 .following 是我的代码

HTML

<input type="text"
           ng-model="address.locality"
           placeholder="Locality"
           typeahead="locality for locality in getLocation($viewValue)"
           typeahead-min-length="3"
           typeahead-loading="isLoading"
           typeahead-no-results="noResults"
           class="form-control newAddressFields">
    <i ng-show="isLoading" class="glyphicon glyphicon-refresh"></i>
    <div ng-show="noResults">
        <i class="glyphicon glyphicon-remove"></i> No Results Found
    </div>

控制器

    $scope.noResults = false;
    $scope.localities = [];
    $scope.isLoading = false;

$scope.getLocation = function(val) {

        var filteredSearch= val.toLowerCase();
        var city_lw = $scope.address.city.toLowerCase();
       /* console.log(filteredSearch)*/;
        var Mapping = Parse.Object.extend("COD_Area_List");

        var localityQuery = new Parse.Query(Mapping);


        localityQuery.startsWith("Locality_sm",filteredSearch);
        localityQuery.equalTo("city_sm", city_lw);
        $scope.localities = [];
        $scope.isLoading = true;
        localityQuery.find({
            success: function(results) {
                $scope.isLoading = false;
                 console.log("Successfully retrieved " + results.length + " responses.");


                if(results.length > 0){
                    $scope.noResults = false;
                    for (var i = 0; i < results.length; i++) {
                        var object = results[i].toJSON();
                        /*console.log(object);*/
                        $scope.localities.push(object.Locality);
                    }
                } else{
                    $scope.noResults = true;
                }
                console.log($scope.localities);
                //This has results showing but not in the dropdown below Typeahead
                return $scope.localities;

            },
            error: function(error) {
                // There was an error.
                $scope.isLoading = false;

            }

        });

    };

Answer 1

在您使用的 HTML 中

typeahead="locality for locality in getLocation($viewValue)"

并且在控制器 $scope.localities 中有一个包含对象的数组.. 所以你可以在下拉列表中查看“对象”..

您的问题的解决方案是在 HTML 中使用对象的属性..

假设您的位置对象如下所示 = {city:"some_city",state:"some_state"}

所以试试这个..

typeahead="locality.city for locality in getLocation($viewValue)"