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

Question

所以我有一个输入字段，它采用从谷歌自动完成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"