Syncfusion和Angularjs:查找每个HTML节点中存在的所有HTML元素值 [英] Syncfusion and Angularjs: find all the HTML Elements values present in each of the HTML Nodes

问题描述

我正在使用Syncfusion创建拖放字段.每个Dropped字段(节点)都是 HTML NODE ，并且具有一些 HTML元素，例如Select和input等.添加所有必需的节点后，用户可以单击点击提交功能后，我想找到节点的每个HTML元素中存在的所有节点和值.

1. 我能够获取节点，但无法找到它们中存在的值.
2. 在元素的拖放操作中，我想向每个节点添加一个不同的文本.我该怎么办?

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;边框底色:#bbbbbb;border-top-style:无；border-left-style:无；border-right-style:无"</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><选择ng-model ="Dynamic.optionValue"class ="form-control">< option class =下拉项目"值="已选择>选择选项</option>< option class =下拉项目"ng-repeat =选项中的选项"value =" {{option.value}}>{{option.text}}</option></select><输入类型=文本"；ng-model ="Dynamic.ObjectCount".占位符＝对象数".class ="form-control"</input></div></div>< button id =" AddNewField"ng-click ="SubmitAllFields();"class ="btn btn-success"提交</button> 

Angularjs:

  var drawingToolsList = [{id:"Html_Tool"，工具提示文字:"HTML"，spriteCss:"icon-HTML toolBarIconStyle"，}，{id:'Connector_Tool'，工具提示文字:连接器"，spriteCss:"icon-connector toolBarIconStyle"，}];//在项目上单击将元素拖放到画布$ scope.onItemclick = function(args){var option = args.currentTarget.id;开关(选项){案例"Html_Tool":diagram.model.drawType = {type:"html"，templateId:"htmlTemplate"，textBlock:"Hello"};$ scope.counts.push(counter);计数器++;$ scope.$ apply()休息;案例"Connector_Tool":diagram.model.drawType = {type:"connector"};休息;}var tool = diagram.tool();diagram.update({工具:tool | ej.datavisualization.Diagram.Tool.DrawOnce})}//点击节点找到值$ scope.onClick = function(){console.log("FJFJF")；} 

我正在尝试访问以下链接并执行:

解决方案

默认情况下，在node中，我们仅绑定node属性值.我们无法绑定节点中使用的HTML内容值.但是，通过使用节点的addInfo属性，您可以存储文本值.addInfo属性用于存储节点的其他信息或自定义信息.编辑文本框并在文本框外单击后，将触发图的selectionChange事件.在那种情况下，获取文本框的值并将其绑定到所选节点的addInfo属性.请参考下面的代码示例

function selectionChange(args){

  if(args.state ==='changing'&& args.changeType ==='remove'){节点= args.oldItems [0];}否则，如果(args.state ==='changed'&& args.changeType ==='remove'){调试器node.addInfo = document.getElementById("text").value;}} 

视频演示: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Selection-Change-694740211

在addInfo中添加值之后，您可以通过节点addInfo属性获取模板的值.

我们已根据您的要求准备了样品.请在下面的链接中找到示例

示例: http://jsplayground.syncfusion.com/tawdhvwg

I am using the Syncfusion to create drag and drop fields. Each of the Dropped field (Node) is the HTML NODE and it has some of the HTML elements such as Select and input etc. After adding all the required nodes user can click on submit function after the click I would like to find all the nodes and values present in each of the HTML Elements of the nodes.

1. I am able to get the Nodes but unable to find the values present in them.
2. On the drag-and-drop of the element, I would like to add a different text to each of the node. How can I do that?

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");
}

I am trying to follow the following link and execute:http://ngjq.syncfusion.com/#/diagram/drawingtools. I am using only the HTML element and I have removed all other elements.

The page would look something like this:

解决方案

By default, in the node , we only bind the node property values. We cannot bind the HTML content values used in the node. However, by using the node addInfo property you can store the text values. The addInfo property is used to store the additional or custom information of node. After edit the text box and click outside the text box, selectionChange event for the diagram gets fired. In that event get the value of the text box and bind it to the selected node addInfo property. Please refer the below code example

function selectionChange(args) {

    if(args.state === 'changing' && args.changeType === 'remove') {
     node =  args.oldItems[0];
    } else if (args.state === 'changed' && args.changeType === 'remove') {
      debugger
      node.addInfo = document.getElementById("text").value;
    }
    
  }

Video demonstration: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Selection-Change-694740211

After add the values in addInfo , you can get the values of the template through node addInfo property.

We have prepared a sample for your requirement. Please find the sample in below link

Sample: http://jsplayground.syncfusion.com/tawdhvwg

这篇关于Syncfusion和Angularjs:查找每个HTML节点中存在的所有HTML元素值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！