I have a solution using AngularJS which generates a bracket of matches in a tournament tree:
My question is how do I draw a line between two nodes which are generated using ng-repeat so it will look something like this?
I have been looking into other questions such as Question 1 and I have been trying to use this code example: jsfiddle.net/kDs2Q/1047/ but I cant figure out how to use it with ng-repeat.
EDIT:
I have made a simple Fiddle to try and setup some of my solution.
jsfiddle.net/U3pVM/14850/
When you click the "Draw line" it draws a line that is way off the two nodes. How do I get it to connect the two nodes with the drawn line? Also in such a way that if I add another node it will connect to the next one.
[Node1]---[Node2]---[Node3]
EDIT 2:
Okay so I have done my best to create a Fiddle out from my own solution. I have made a setup where each node has an Id and a ParentId. This way I should be able to set the line to be drawn from child to parent.
But it seems like I am hitting a continious loop in traverseScopesLoop in the angularjs. I cant get it to render.
I suspect that the document.body.innerHTML += htmlLine; in the "connect" function might be the cause of the loop?
Please have a look at this fiddle and have in mind that the function "iterateAndGenerateDivsForDrawnLines" is outcommmented. You need to remove the outcomment to run the function and start the loop.
jsfiddle.net/U3pVM/14934/
Help, suggestions, links - everything is appreciated! Thank you in advance. :)
