Question

我正在尝试使用Angularjs在Google地图上动态添加一些输入表单。当我添加新项目时，它只删除旧项目并在其上创建一个新框。

如何在输入框下创建一个？并且当它们太多时动态删除它？

以下是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>

在控制器中：

$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。

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

1 个答案: