我试图在我的代码中添加动态自动完成指令,即通过url并将params传递给url

问题描述 投票:0回答:2

我想将查询[我在文本框中输入]作为params发送到url,我无法通过

脚本代码

var myApp = angular.module('myApp', ['angucomplete-alt']);

     myApp.controller('ngautocomplete', ['$scope', '$http', function ($scope, $http) {

         $scope.Places = [];
         $scope.SelectedPlace = null;


         $scope.afterSelectedPlace = function (selected) {
             if (selected) {
                 $scope.SelectedPlace = selected.originalObject;
             }
         }
         $http({
             method: 'GET',
             url: '../HttpHandler/AutoCompleteMapMyindiaAddress.ashx',
             params: {
                 query:  ,
                 current_lat: ,
                 current_lng:  
             }
         }).then(function (response) {
             console.log(response.data)
             $scope.Places = response.data.data.suggestedLocations.placeAddress;
         },
         function (error) {
             console.log(error)
         }
         )
     }])

HTML代码

<div data-ng-app="myApp" data-ng-controller="ngautocomplete">
        <div angucomplete-alt id="txtLocation" placeholder="Enter the location" pause="100"
            selected-object="afterSelectedPlace"  local-data="Places" search-fields="PlaceName"
            text-field="CountryName" minlength="1" input-class="form-control"   match-class="highlight"s>
        </div>
</div>



<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angucomplete-alt/2.5.0/angucomplete-alt.min.js"></script>
</script>

我没有得到如何发送查询以及如何绑定到文本框。

angularjs-directive
2个回答
1
投票

最后我得到了这个问题的解决方案

angularjs代码

app.directive('autoComplete', ['$filter', '$http', function ($filter, $http) {
            return {
                restrict: 'A',
                link: function ($scope, elem, attrs) {
                    elem.autocomplete({
                        source: function (request, response) {
                            //request watever we enter in location textbox
                            var params = request.term;
                            console.log(params + ' |' + map.getCenter().lat + ' ' + map.getCenter().lng);

                            $http.get('../HttpHandler/AutoCompleteMapMyindiaAddress.ashx', {
                                params: {
                                    query: params,
                                    current_lat: map.getCenter().lat,
                                    current_lng: map.getCenter().lng
                                }

                            }
                     ).then(function (d) {
                         $scope.suggestedloc = d.data.data.suggestedLocations;
                         var data = $scope.suggestedloc;
                         if (data) {
                             var result = $filter('filter')(data, { placeName: params });
                             console.log(result)
                             angular.forEach(result, function (item) {
                                 item['value'] = item['placeName'] + ' ' + item['placeAddress'];
                             });
                         }
                         response(result);

                     }, function (error) {
                         console.log(error);
                     });
                        },
                        minLength: 3,
                        select: function (event, ui) {
                            event.preventDefault();
                            console.log(ui);
                            console.log('ui')
                            $scope.$apply(function () {
                                $scope.GetLatLon(ui.item);
                            });
                        },
                    })
                }
            };
        }]);

并在HTML中

<input auto-complete class=" form-control" data-ng-model="Location" placeholder="Search Location" style="width: 280px; text-align: center" type="text" />

我提供的脚本代码是

<script src="../Content/js/vendor/jquery-1.11.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="../Content/js/jquery-ui.js"></script>

每3个字母后,我会点击服务器,我会得到位置


0
投票

在最后附加您的查询参数:

url: '../HttpHandler/AutoCompleteMapMyindiaAddress.ashx?someQuery='+<variableName>
© www.soinside.com 2019 - 2024. All rights reserved.