Question

所以我有一个输入字段，它取一个从googles autocomplete api中选择的地址。

<div class="form-group" ng-show="editing || creating" has-class="{'has-error': roomForm.address.$invalid && (roomForm.address.$touched || roomForm.$submitted)}">
                <input address-search selected-address="selectedAddress" class="form-control" placeholder="Where is your place located?" name="address" ng-model="room.address" required type="text">
                <div class="alert alert-danger" ng-show="roomForm.address.$error.required && (roomForm.address.$touched || roomForm.$submitted)" role="alert">The room location is required</div>
            </div>

这是将自动完成功能附加到输入

的指令

angular.module('app')
  .directive('addressSearch', function() {
    return {
      scope: {
        addressSearch: '=',
        selectedAddress: '=selectedAddress'
      },
      link: function(scope, element, attrs) {
        var options = {
          types: ['address']
        };

        var autocomplete = new google.maps.places.Autocomplete(element[0], options);

        autocomplete.addListener('place_changed', function() {
          var address = autocomplete.getPlace();
          scope.selectedAddress(address);
        });
      }
    };
  });

问题是当我选择一个地址然后开始输入另一个表单元素时，输入字段中的地址将变为[Object object]而不是显示我最初选择的地址。我知道它正在显示，因为它试图将ng-model显示为一个字符串，但是如何阻止它这样做呢？

Answer 1

selectedAddress是一个对象。您需要访问该对象上的属性以获取您正在寻找的字符串。

在其中放置console.log(selectedAddress)以查看对象的外观，然后找到您需要的属性并在ng-model上使用该属性，例如ng-model="room.address.foo.bar"

ng-model将输入字段中的文本更改为[Object object]

1 个答案: