Create dynamic extensible table with angularjs and jquery

Question

Create dynamic extensible table with angularjs and jquery

I would like to create an extensible table using jQuery: http://ludo.cubicphuse.nl/jquery-treetable/#examples .

The problem is that there is a conflict between angularjs and jquery. This is my html file:

<table> <tbody ng-repeat="row in construct.matrix.rows"> <tr data-tt-id="row.name"> <td>{{row.name}}</td> <td> <button ng-click="newField($index)">Add a Field</button> <form ng-submit="addField($index, fieldName, row)" ng-if="choose($index)"> <input type="text" ng-model="fieldName" name="text" placeholder="New Field" /> </form> </td> </tr> </tbody> </table>

To use the jquery part, I use this tag:

 $(document).ready(function() { initialize(); }); function initialize() { $("table").agikiTreeTable({ persist : false, persistStoreName : "files" }); }

I would like to have a simple table at the beginning with only one row. On this line, the user can click on the button and then send a new line, which will be the expandable line from the first. To make sure this was possible, I tried to do it, but I realized that I had to remember the initialization function after sending the first expandable string. And it works, but if I want to perform the operation again, I have some conflicts.

Take a look at this image: