Is there a way I can convert this x-jsrender function to ng-template?

[AB]

I am trying to convert this function for drawing the shapes from X-JSRENDER to NG-TEMPLATE. I am able to draw the shapes and everything works fine but I am unable to assign different NG-MODEL values for the fields every time when I create them. Due to which when I make changes to one NODE field then all the other NODES with same field are getting the same values. As most part of my application is in Angularjs I would like this also to be in AngularJS. Also, I need to populate the SELECT field from DATABASE and the values are present within $SCOPE variable, if I use X-JSRENDER then I won't be able to access my $SCOPE variable within X-JSRENDER.

Here is the complete code: https://jsfiddle.net/B_AV_B/39w42onm/18/

//Add the Node on Drag and Drop

$scope.NodeAdd = function()

{

$scope.diagram =  angular.element("#diagram").ejDiagram("instance");

var ports = [{name:"port1",offset:{x:0,y: 0.5},shape: "circle"},{name:"port2",offset:{x: 1,y: 0.5},shape: "circle"},{name:"port3",offset:{x:0.5,y:0},shape: "circle"},{name:"port4",offset:{x:0.5,y:1},shape: "circle"}];

var name = "Event"+nodeCounter;

var label = [{text:name ,offset:{x: 0.5,y: 0.1 }}];

$scope.diagram .model.drawType = { 

type : "html", 

name : name,

templateId : "htmlTemplate",

labels : label,

ports : ports,

value : {

text : "text"+Number(nodeCounter),

select : "BusinessStep"+Number(nodeCounter)

}

};

var tool = $scope.diagram.tool();

$scope.diagram.update({ tool: tool | ej.datavisualization.Diagram.Tool.DrawOnce });

nodeCounter++;

}

//on change of the text field get the values and populate in Node addinfo

$scope.change = function(){

console.log('Within Text Change');

var diagram = angular.element("#diagram").ejDiagram("instance"); 

var node = diagram.selectionList[0];

var text = diagram.model.drawType.value.text; 

node.addInfo.value = text;

console.log(node);

}

//on change of the Select fied get the values and populate in Node addinfo

$scope.SelectField = function(){

console.log('Within Select Change');

var diagram = angular.element("#diagram").ejDiagram("instance"); 

var node = diagram.selectionList[0];

var select = diagram.model.drawType.value.select; 

node.addInfo.value = select;

console.log(node);

}

I tried couple of things such as ng-repeat but it would repeat the node again and again.I tried adding the value as ARRAY instead of OBJECT when creating the node as mentioned in another answer but that also would not work.

     

If you could give me some idea or guidance then it would be really great. Thanks a lot.

[Gowtham Gunashekar]

Hi AB, 

  

We are validating your requirement and update you on 3^rd august with more details. 

  

Regards, 

Gowtham 

 

[AB]

Sure. Thaks a lot for the update. 
I hope you were able to understand what I am trying to achieve. If not please let me know I would be happy to provide some more clarification. Meanwhile I am also trying to do some alternative approach if something works then will update here.

[Aravind Ravi]

Hi AB, 

Yes, you can use NG-Template instead of the Js-Render. In the Script to render HTML template use ng-template instead of text/x-jsrender. Please find the below code snippet for how to set ng-Template 

<script id="htmlTemplate" type="ng-template"> 

              <div style="margin-left: 45px; margin-top: 10px"> 

                             <input type="button" value="Button"/> 

              </div> 

</script> 

For more information about how to use NG-Template in Angular JS, please refer below documentation link 

https://www.tutlane.com/tutorial/angularjs/angularjs-ng-template-directive-with-example 

https://docs.angularjs.org/api/ng/directive/script 

We have attached a sample for how to use ng-template. Please find the sample in below link 

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

Regards 

Aravind Ravi 

[AB]

Hello Aravind Ravi,

Thanks a lot for the response. Yes I have tried that and everything is working fine but when I drag and drop the NODE to my ej-Diagram then I am assigning the different values for text and SELECT in the x-jsrender that I am unable to achieve with ng-template. (You had helped me how to achieve this using the x-jsrender in previous post)

If possible please once check the attached code and screen recording that I have provided with this reply, in that I am trying to assign the different NG-MODEL for each TEXT and SELECT field when the NODE is created using the drag-and-drop and then I am trying to get the value for these TEXT and SELECT field but I am unable to assign the different NG-MODEL values due to which if I have 2 NODES in my ej-diagram then when I change TEXT/SELECT for one of the field then the fields in OTHER NODES are also getting assigned with the same value. 

I would like to know how can I assign different values of NG-MODEL for each TEXT and SELECT field when a NODE is drag-and-dropped to ej-Diagram so that based on that I can read the values for each of them separately just like how you suggested in the x-jsrender ()

I hope I was able to explain to you the exact issue, if not please let me know.

I have posted the code here as well: https://jsfiddle.net/B_AV_B/ydxgatkm/1/

Attachment: Desktop_77f5c2fd.zip

[Aravind Ravi]

Hi AB, 

We have modified a sample to add different text box for nodes. On analyzing the provided code snippet you does not added an Id for the text box and drop down box. So please set Id for the text box and drop down. So that you can able to get store a text box values in that respective node addInfo value. Please refer the below code snippet and sample below 

<script ng-model="select" id="htmlTemplate" type="text/ng-template"> 

 <div style="margin-top:15%;">  

              <select id="{{:value["select"]}}" class="form-control" ng-change="$parent.SelectField();"> 

              <option class="dropdown-item" value="Option 1" selected> Choose Options</option> 

              <option class="dropdown-item" value="comissioning"> Comissioning     </option> 

              <option class="dropdown-item" value="shipping">          Shipping                              </option> 

              <option class="dropdown-item" value="receiving">               Receiving                          </option> 

              </select> 

              <br/> 

<input id="{{:value["text"]}}"  ng-blur="$parent.change();"  class="form-control" autocomplete="off" type="text" placeholder="number of objects"></input>          

                                           </div> 

                             </script> 

Sample: https://jsfiddle.net/s40n76rm/ 

Regards 

Aravind Ravi 

[AB]

Thanks a lot Aravind.

I was thinking I should use NG-MODEL as I am using Angularjs so I messed up sorry for that.

Thanks again for the help.

[Aravind Ravi]

Hi AB, 

 

Thanks for the update. 

 

Regards 

Aravind Ravi