Question

我正在使用angular-google-maps模块构建路线规划应用，但无法找到将动态占位符文字添加到编辑页面上的自动填充表单的方法。

这是我的代码。

在JS控制器中：

    var startpointEvents = {
    places_changed: function (searchBox) {
      var place = searchBox.getPlaces();
      startpoint = place[0];
      if (!place[0].geometry) {
        window.alert("Autocomplete's returned place contains no geometry");
        return;
      }
    }
  }

  self.startpointSearchbox = { 
    template:'js/views/searchboxes/startpointSearchbox.tpl.html', 
    events: startpointEvents,
    parentdiv: "startpoint-input"
  };

  var endpointEvents = {
    places_changed: function (searchBox) {
      var place = searchBox.getPlaces();
      endpoint = place[0];

      if (!place[0].geometry) {
        window.alert("Autocomplete's returned place contains no geometry");
        return;
      }
    }
  }

  self.endpointSearchbox = { 
    template:'js/views/searchboxes/endpointSearchbox.tpl.html', 
    events: endpointEvents,
    parentdiv: "endpoint-input"
  };

  var stopoverEvents = {
    places_changed: function (searchBox) {
      var place = searchBox.getPlaces();
      stopover.push(place[0]);
      console.log(stopover);
      if (!place[0].geometry) {
        window.alert("Autocomplete's returned place contains no geometry");
        return;
      }
    }
  }

  self.stopoverSearchbox = { 
    template:'js/views/searchboxes/stopoverSearchbox.tpl.html', 
    events: stopoverEvents,
    parentdiv: "stopover-input"
  };

在HTML中：

<div class="sidebar-content">

        <h2 class="trip-name-head">{{ trips.trip.name }} trip</h2>

      <form class="form" id="tripForm" ng-submit="trips.updateTrip()">
        <div id="startpoint-input">

        </div>
        <div id="endpoint-input">

        </div>
        <div id="stopover-input">

        </div>

        <input type="submit" value="Save" id="submit" class="save-button">
      </form>
    </div>   

  </div>
  <div class="col-sm-9">
    <ui-gmap-google-map center='trips.map.center' zoom='trips.map.zoom'>
      <!-- look for configuration (template, events and parentdiv) defined in tripsController -->
      <ui-gmap-search-box template="trips.startpointSearchbox.template" events="trips.startpointSearchbox.events" parentdiv="trips.startpointSearchbox.parentdiv"></ui-gmap-search-box>

      <ui-gmap-search-box template="trips.endpointSearchbox.template" events="trips.endpointSearchbox.events" parentdiv="trips.endpointSearchbox.parentdiv"></ui-gmap-search-box>

      <ui-gmap-search-box template="trips.stopoverSearchbox.template" events="trips.stopoverSearchbox.events" parentdiv="trips.stopoverSearchbox.parentdiv"></ui-gmap-search-box>

      <ui-gmap-search-box template="trips.stopoverSearchbox.template" events="trips.stopoverSearchbox.events" parentdiv="trips.stopoverSearchbox.parentdiv"></ui-gmap-search-box>

      <ui-gmap-search-box template="trips.stopoverSearchbox.template" events="trips.stopoverSearchbox.events" parentdiv="trips.stopoverSearchbox.parentdiv"></ui-gmap-search-box>

      <ui-gmap-search-box template="trips.stopoverSearchbox.template" events="trips.stopoverSearchbox.events" parentdiv="trips.stopoverSearchbox.parentdiv"></ui-gmap-search-box>

      <ui-gmap-markers models="trips.markers" coords="'self'" icon="'icon'"></ui-gmap-markers>

      <ui-gmap-polyline ng-repeat="p in trips.polylines track by $index" path="p.path" stroke="p.stroke" visible='p.visible' geodesic='p.geodesic' fit="false" editable="p.editable" draggable="p.draggable" icons='p.icons'></ui-gmap-polyline>

    </ui-gmap-google-map>

我的模板：

<input id="startpoint-input" class="controls" type="text" placeholder="{{ trips.boundcontent }}">

<input id="endpoint-input" class="controls" type="text" placeholder="{{ trips.boundcontent }}">

<input id="stopover-input" class="controls" type="text" placeholder="{{ trips.boundcontent }}">

占位符属性中的boundcontent不会从trip控制器中选择任何内容。这是否可以使用angular-google-maps？

提前致谢

如何向angular-google-maps自动填充表单添加动态占位符文本？

0 个答案: