I'd like to create an expandable table by using JQuery: http://ludo.cubicphuse.nl/jquery-treetable/#examples.
The issue 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'd like to have a simple table at the beginning with only one row. On this row, the user can click on a button and then submit a new row which will be an expandable row from the first one. Just to see if it was possible, I tried to do so but I understood that I had to recall the initialize function after submitting the first expandable row. And it works, but if I want to do the operation again I have some conflicts.
Look at this picture:
So if anyone has an idea to fix this, I will be glad to hear it. Thanks
Why not using Angular libraries and avoid jQuery based components?
Here are some alternatives:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With