我正在使用 Syncfusion 创建拖放字段。每个 Dropped 字段(节点)都是HTML NODE
并且它有一些HTML elements
例如 Select 和 input 等。添加所有必需的节点后,用户可以单击提交功能单击后我想找到所有节点和值存在于节点的每个 HTML 元素。
- 我能够获取节点但无法找到其中存在的值。
- 在元素的拖放中,我想为每个节点添加不同的文本。我怎样才能做到这一点?
HTML:
<div>
<div id="ToolbarItem" ej-toolbar e-datasource="drawingToolsList" e-fields-tooltiptext="tooltiptext"
e-width="700px" e-height="33px" e-fields-id="id" e-fields-spritecssclass="spriteCss" e-click="onItemclick"
style="background-color: #ebeced; border-bottom-color: #bbbbbb; border-top-style: none; border-left-style: none; border-right-style: none">
</div>
<div>
<ej-diagram id="diagram" e-height="700px" e-width="100%" e-nodeclick="onClick">
</ej-diagram>
</div>
</div>
<div id="htmlTemplate" type="text/x-jsrender">
<div>
<select ng-model="Dynamic.optionValue" class="form-control">
<option class="dropdown-item" value="" selected> Choose Options</option>
<option class="dropdown-item" ng-repeat="option in options" value="{{ option.value }}"> {{ option.text }} </option>
</select>
<input type="text" ng-model="Dynamic.ObjectCount" placeholder="number of objects" class="form-control"></input>
</div>
</div>
<button id="AddNewField" ng-click="SubmitAllFields();" class="btn btn-success"> Submit </button>
Angularjs:
var drawingToolsList = [
{
id : "Html_Tool",
tooltiptext : "Html",
spriteCss : "icon-HTML toolBarIconStyle",
},
{
id : 'Connector_Tool',
tooltiptext : "Connector",
spriteCss : "icon-connector toolBarIconStyle",
}
];
//On item click drag and drop the elements to canvas
$scope.onItemclick = function(args){
var option = args.currentTarget.id;
switch (option) {
case "Html_Tool":
diagram.model.drawType = { type: "html", templateId: "htmlTemplate", textBlock:"Hello" };
$scope.counts.push(counter);
counter++;
$scope.$apply()
break;
case "Connector_Tool":
diagram.model.drawType = { type: "connector"};
break;
}
var tool = diagram.tool();
diagram.update({ tool: tool | ej.datavisualization.Diagram.Tool.DrawOnce })
}
//On click of node find the values
$scope.onClick = function(){
console.log("FJFJF");
}
我正在尝试按照以下链接执行: http: //ngjq.syncfusion.com/#/diagram/drawingtools。我只使用该HTML
元素,并删除了所有其他元素。