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

Answer 1

Why not using Angular libraries and avoid jQuery based components?

Here are some alternatives:

• http://ui-grid.info/docs/#/tutorial/216_expandable_grid
• http://thienhung1989.github.io/angular-tree-dnd/demo/#/basic
• http://khan4019.github.io/tree-grid-directive/test/treeGrid.html
• http://angular-ui-tree.github.io/angular-ui-tree/#/table-example

Answer 2

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

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