Sup人！我正在尝试构建一个动态表单，但我遇到了一个ngModel问题。
这个想法是：
我有两个数组：一个用于临时显示用户选择的信息，另一个用于实际保存在帖子上（我有不同类型的数据，所以我必须这样做）。
1-用户使用<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<html>
<head>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<style>
html,
body,
#map {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.link {
stroke: #ccc;
stroke-width: 1.5px;
}
.stations,
.stations svg {
position: absolute;
}
.stations svg {
width: 1200px;
height: 600px;
padding-right: 100px;
font: 12px sans-serif;
}
.stations circle {
fill: brown;
stroke: black;
stroke-width: 1.5px;
}
</style>
</head>
<body>
<div id="map" style="width: 1200px; height: 600px;"></div>
<script type="text/javascript">
// Create the Google Map…
var map = new google.maps.Map(d3.select("#map").node(), {
zoom: 12,
center: new google.maps.LatLng(51.5195, -0.1269),
mapTypeId: google.maps.MapTypeId.TERRAIN
});
//d3.json("stations.json", function(error, data) {
var data = {
"nodes": [{
"name": "A",
"long": 0.0000,
"lat": 51.4800
}, {
"name": "B",
"long": -0.1684,
"lat": 51.4875
}, {
"name": "C",
"long": -0.2043,
"lat": 51.5096
}, {
"name": "D",
"long": -0.1269,
"lat": 51.5295
}],
"links": [{
"source": 0,
"target": 1
}, {
"source": 0,
"target": 2
}, {
"source": 0,
"target": 3
}, {
"source": 2,
"target": 3
}]
}
var overlay = new google.maps.OverlayView();
overlay.onAdd = function() {
var layer = d3.select(this.getPanes().overlayLayer).append("div")
.attr("class", "stations");
overlay.draw = function() {
layer.select('svg').remove();
var projection = this.getProjection(),
padding = 10;
var svg = layer.append("svg")
.attr('width', 1200)
.attr('height', 600)
var node = svg.selectAll(".stations")
.data(data.nodes)
.enter().append("g")
.each(transform)
.attr("class", "node");
var link = svg.selectAll(".link")
.data(data.links)
.enter().append("line")
.attr("class", "link")
.each(drawlink);
node.append("circle")
.attr("r", 4.5);
node.append("text")
.attr("x", 7)
.attr("y", 0)
.attr("dy", ".31em")
.text(function(d) {
return d.name;
});
function latLongToPos(d) {
var p = new google.maps.LatLng(d.lat, d.long);
p = projection.fromLatLngToDivPixel(p);
p.x = p.x - padding;
p.y = p.y - padding;
return p;
}
function transform(d) {
var p = latLongToPos(d);
return d3.select(this)
.attr("transform", "translate(" + p.x + "," + p.y + ")");
}
function drawlink(d) {
var p1 = latLongToPos(data.nodes[d.source]),
p2 = latLongToPos(data.nodes[d.target]);
d3.select(this)
.attr('x1', p1.x)
.attr('y1', p1.y)
.attr('x2', p2.x)
.attr('y2', p2.y)
.style('fill', 'none')
.style('stroke', 'steelblue');
}
};
};
overlay.setMap(map);
//});
</script>
</body>
</html>选择一个选项。所选选项是列表中的<select>。用户点击object链接，弹出选定的选项。
2-所选选项具有自定义属性，必须在点击添加按钮之前设置。为此，选择一个选项时会弹出一个'输入'。根据{{1}}的属性动态设置ngModel。
3-我需要获取输入数据，并将其保存在列表中所选对象的属性中。
4-将对象推送到要发布的数组（newData）。
我的工作是什么：列表，动态ngModel。 我需要的是：从这个ngModel广告获取数据在我的指令中使用它。
这里是代码：
HTML：
add指令（范围：false）相关函数：
object列表的一部分（来自Lists.js服务）
<select id="newPrereq" class="form-control" name="newPrereq" ng-model="newPrereq" ng-options="prereq.name group by prereq.cat for prereq in prereqs | orderBy:prereq.name">
<option value="" hidden>-- Select --</option>
</select>
<input type="{{newPrereq.type}}" ng-show="newPrereq.array" ng-model="newPrereq[ngModel]">
<a ng-click="addItem(newPrereq, selectedPrereqs, 'prereqs')" ng-show="newPrereq !== undefined || ''">add</a>
<ul class="list-inline">
<li ng-repeat="prereq in selectedPrereqs"><span>{{prereq.name}} </span> <a ng-click="removeItem($index, selectedPrereqs, 'prereqs')">[X]</a></li>
</ul>