создать динамическую расширяемую таблицу с помощью angularjs и jquery

Question

Я хотел бы создать расширяемую таблицу с помощью JQuery: http://ludo.cubicphuse.nl/jquery-treetable/#examples.

Проблема в том, что существует конфликт между angularjs и jquery. Это мой HTML-файл:

<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> 

Чтобы использовать Jquery часть я использовать этот тег:

$(document).ready(function() { 
    initialize(); 
}); 

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

Я хотел бы иметь простую таблицу в начале только один ряд. В этой строке пользователь может щелкнуть по кнопке, а затем отправить новую строку, которая будет расширяемой строкой из первой. Чтобы убедиться, что это возможно, я попытался это сделать, но я понял, что мне пришлось вспомнить функцию инициализации после отправки первой расширяемой строки. И это работает, но если я хочу снова выполнить операцию, у меня есть некоторые конфликты.

Посмотрите на эту картину:

Так что, если кто-то имеет представление о том, чтобы исправить это, я буду рад услышать. Спасибо

Answer 1

Почему бы не использовать Угловые библиотеки и не использовать компоненты на основе jQuery?

Вот некоторые варианты:

• 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

Попробуйте библиотеку нг-таблицы, это группировка функций, встроенных в:

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