create a dynamic expandable table by using angularjs and jquery

Question

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

I don't understand the problem. Can you just create a snippet or bin? it will much easier for us to help you that way. — Mosh Feu, Feb 22 '16 at 06:46
Thanks for your help but @beaver solved my problem. I just wanted to create a dynamic table but i didn't know that i could use only angularjs — Kevin Vincent, Feb 22 '16 at 13:53

score 1 · Accepted Answer · answered Feb 22 '16 at 07:04

1

Why not using Angular libraries and avoid jQuery based components?

Here are some alternatives:

answered Feb 22 '16 at 07:04

beaver

17,333
2
40
66

Thanks i looked for something like this for hours – Kevin Vincent Feb 22 '16 at 13:54
So i chose this solution : http://thienhung1989.github.io/angular-tree-dnd/demo/#/basic and this is very useful but i don't find how to reload data so if you have any idea it will be helpful. Thanks – Kevin Vincent Feb 22 '16 at 20:41
Reload data? Do you mean update the UI after data change? Please share your code relating data updating, tree table sourcing and code useful to reproduce your problem – beaver Feb 23 '16 at 07:57
Yes this is what i meant. But it's ok i found how to do it. Thanks – Kevin Vincent Feb 23 '16 at 08:18

score 0 · Answer 2 · answered Sep 04 '17 at 14:43

0

Try the ng-table library, it has grouping functionality built in:

http://ng-table.com/#/grouping/demo-grouping-basic

answered Sep 04 '17 at 14:43

Nico Westerdale

2,147
1
24
31

create a dynamic expandable table by using angularjs and jquery

2 Answers2