【问题标题】:restrict google places entry to suggested list in AngularJS将谷歌地方条目限制在AngularJS中的建议列表中
【发布时间】:2015-04-30 01:30:22
【问题描述】:

我已将 Google 地方设置为自动填写表单输入。我现在需要某种验证。我决定最好的方法是不允许输入不在建议列表中的任何文本。我如何修改下面的工作指令来做到这一点?如果文本输入与有效建议不匹配,我希望清除文本输入并将模型设置为 ''。

角度指令:

.directive('googlelocation', function () {
    return {
        require: 'ngModel',
        link: function (scope, element, attrs, model) {
            var options = {
                types: [],
            };
            scope.gPlace = new google.maps.places.Autocomplete(element[0],
                    options);

            google.maps.event.addListener(scope.gPlace, 'place_changed',
                    function () {
                        scope.$apply(function () {
                            model.$setViewValue(element.val());
                        });
                    });
        }
    };
});

供参考

HTML:

 <input class="pb-input" id="plocation" name="plocation" type="text" autocomplete="on" ng-model="formData.PLocation" googlelocation ng-required="true" >

脚本参考

 <script src="//maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places" type="text/javascript"></script>

【问题讨论】:

    标签: javascript angularjs google-maps google-maps-api-3


    【解决方案1】:

    尝试将place_changed 监听器更改为:

            google.maps.event.addListener(scope.gPlace, 'place_changed',
                    function () {
                        scope.$apply(function () {
                            var place = scope.gPlace.getPlace();
                            if (!place.geometry) {
                                 element.val('');
                            } else {
                                 model.$setViewValue(element.val());
                            }
                        });
                    });
    

    【讨论】:

    • 这越来越近了。如果用户在列表中选择不包含几何图形的内容(即 Google 的建议),则此解决方案理论上会起作用,这将始终正确,因此 !place.geometry 将永远不会评估 Google 是否发送有效结果。我们需要的是,如果用户通过输入他们自己的文本来改变列表并且这不成立。如果未选择建议,可能会触发 getPlace 事件来评估表达式。
    猜你喜欢
    • 1970-01-01
    • 2011-04-18
    • 2013-11-04
    • 2011-10-22
    • 2016-01-26
    • 1970-01-01
    • 2012-09-10
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多