javascript - Angularjs 如何在 Google map 上使用 ng-Repeat 添加/删除动态输入表单？

Question

我正在尝试在 Google map 上使用 Angularjs 动态添加一些输入表单。当我添加新元素时，它只是删除旧元素并在其上制作一个新框。

如何在输入框下创建一个？并在数量过多时动态删除它？

这是 JSFiddle版本。

html

<div ng-app>
<div ng-controller="MapCtrl">
<div ng-repeat="item in items"><input id="fieldsme" type="text" placeholder="Type new location" ng-model="item.direction"> 
</div> <button id="buttononmap" ng-click="add()">New box</button> 
<div id="routes3-map"></div> </div>

js

function MapCtrl($scope) {
var myLocation = new google.maps.LatLng(50.2381736,9.9646571);
var mapOptions = {
  zoom: 8,
  center: myLocation,
  disableDefaultUI: true,
  zoomControl: true,
  zoomControlOptions: {
    style: google.maps.ZoomControlStyle.BIG,
    position: google.maps.ControlPosition.LEFT_BOTTOM
  }
};
$scope.map = new google.maps.Map(document.getElementById('routes3-map'), mapOptions);

$scope.items = [direction=""];

$scope.add = function () {
  $scope.items.push({
    direction: ""
  });
};

CSS

#routes3-map {
  height: 100%;
  width: 100%;
  position: absolute;
}


#fieldsme {
  margin-left: 30px;
  margin-top: 50px;
  position: absolute;
  z-index: 1;
}

#buttononmap {
  margin-left: 210px;
  margin-top: 50px;
  position: absolute;
  z-index: 1;
}

有人能帮忙吗？

Answer 1

元素被添加到数组中，但与最初的形式不同。所以改变数组的创建:

$scope.items = [{direction:""}];

此外，由于 ng-repeat，您可以使用相同的 id 创建多个元素，更重要的是，使用相同的 css 样式，因此它们都被放置在相同的位置。

如果你想使用position: absolute，你可以使用ng-style根据它们在数组中的位置来放置它们:

// init top variable with the calculation of the wanted margin-top
<div ng-repeat="item in items" ng-init="top = (50 + ($index * 20)) + 'px'">
    <input  ng-style="{'margin-top': top}" class="fieldsme" type="text" placeholder="Type new location" ng-model="item.direction"/>
</div>

要删除元素，只需设置一个按钮，用它的行索引调用一个函数:

<button ng-style="{'margin-top': top}" class="fieldsme"  ng-click="remove($index)">X</button>

在 Controller 中:

$scope.remove = function (index) {
    $scope.items.splice(index, 1);
};

此外，将 ng-repeat 更改为 $index，这样它也会更新 margin-top。

<div ng-repeat="item in items track by $index" ng-init="top = (50 + ($index * 20)) + 'px'">

查看此 fiddle .