使用角度检索自动完成表单输入的数据答案

【问题标题】：Retrieve data for an autocomplete form input with angular使用角度检索自动完成表单输入的数据
【发布时间】：2016-03-01 10:08:41
【问题描述】：

我有一个用 Angular 制作的表格，其中一个输入是用谷歌地图自动完成的。问题是，如果我写“疯狂”并且在发送表单时自动填充用“马德里”填充它，那么只有“疯狂”而不是“马德里”，并且对于较长的地址也是如此。

我在自动填充使用自动完成位置获得的纬度和经度时遇到了类似的问题，但我解决了。我对自动完成输入进行了同样的尝试，但无法正常工作。

这是我的表单的一部分：

<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

【问题讨论】：

¿你能放一个 punlk、jsfiddle 等的片段吗？
我用小提琴编辑了帖子
不应该是<input ng-model="newCtrl.event.formatted_addres" 是<input ng-model="newCtrl.event.formatted_address" ??
一开始我有一个错字，我在数据库中写了“formatted_addres”而不是“formatted_address”，当我意识到在没有回滚迁移的情况下进行更改并再次执行时为时已晚，所以我将所有内容更改为“formatted_addres”。一切都是这样工作的，除了获取自动完成输入的所有完整名称。

标签： angularjs forms autocomplete

【解决方案1】：

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

所以后来我把它定为 $('.autofill') 并且它起作用了。剩下的就是提交这个输入而不是原始输入。也许这不是一个优雅的解决方案，但它确实有效。

【讨论】：