Question

我有一个用angular制作的表单，其中一个输入是用谷歌地图自动完成的。问题是，如果我写＆＃34;疯狂＆＃34;并且自动完成功能填满了＃34;马德里＆＃34;当表单发送时，只有＆＃34; Mad＆＃34;而不是＆＃34;马德里＆＃34;对于较长的地址也一样。

我有一个类似的问题，自动填充自动填充位置获得的纬度和经度，但我解决了它。我尝试使用自动完成输入并且无法正常工作。

这是我表格的一部分：

<fieldset class="form-group">
    <input ng-model="newCtrl.event.formatted_addres" type="text"
           ID="location-placheholder" class="form-control"
           placeholder="Where will be the event?" 
           title="Location" required />
</fieldset>
<fieldset ng-show ="false" class="form-group">
    <input ng-model="newCtrl.event.longitude" type="float" 
           ID="location-longitude" class="form-control" 
           title="Location-longitude" required />
</fieldset>
<fieldset ng-show ="false" class="form-group">
    <input ng-model="newCtrl.event.latitude" type="float" 
           ID="location-latitude" class="form-control" 
           title="Location-latitude" required />
</fieldset>

这是formatted_address字段的自动完成功能：

function setupAutocomplete(){
  var input = $('#location-placheholder')[0];
  var autocomplete = new google.maps.places.Autocomplete(input);
  autocomplete.addListener('place_changed', function(){
    var place = autocomplete.getPlace();
    var infowindow = new google.maps.InfoWindow({
    });
    if (place.geometry.location) {
      $("#location-longitude").val(place.geometry.location.lng().toFixed(7));
      $("#location-longitude").trigger('input');
      $("#location-latitude").val(place.geometry.location.lat().toFixed(7));
      $("#location-latitude").trigger('input');
      $("location-placeholder").val(place.formatted_address);
      $("location-placeholder").trigger('input');
      map.setCenter(place.geometry.location);
      createMarker(place.geometry.location, place.formatted_address);
    } else {
      alert("The place has no location...?")
    };
  });
};

当我这样做时

$("#location-latitude").val(place.geometry.location.lat().toFixed(7));
      $("#location-latitude").trigger('input');

纬度输入正确填充并正确发送，但如果我这样做：

$("location-placeholder").val(place.formatted_address);
          $("location-placeholder").trigger('input');

它一直只发送我已经写过的地址的一部分，而不是发送自动填充的地址的其余部分。

由于

我添加了一个小提琴我的代码，我一直试图让它工作没有$ http请求，但我不能。所以我希望这足以评估我的代码。

http://jsfiddle.net/sjc7jtbp/1

Answer 1

最后我解决了它，由于某种原因，ajax没有针对输入。所以我创建了一个用ng-show =“false”隐藏的新输入，并将其标记为class =“autofill”。

所以后来我把它作为$（'。autofill'）瞄准它并且它起作用了。其余的是提交此输入而不是原始输入。也许这不是一个优雅的解决方案，但它确实有效。

使用angular检索自动完成表单输入的数据

1 个答案: