Question

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

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)"

并在Controller $ scope.localities中有一个包含Objects的数组。因此，您可以在下拉列表中查看“对象”..

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

假设您的位置对象看起来像这样= {city：“some_city”，state：“some_state”}

所以试试这个......

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

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

1 个答案: