Динамическая таблица AngularJS с несколькими заголовками на основе иерархических коллекций

Question

Я пытаюсь создать таблицу с двумя строками для заголовка на основе иерархической коллекции. Я обнаружил, что ng-repeat не может этого сделать, и я пытаюсь выполнить работу с помощью директивы и Angular.forEach.

Вот jsfiddle: http://jsfiddle.net/echterpat/RxR2M/9/

Но моя проблема в том, что, когда я сделал первое отображение таблицы, коллекции были пустыми (они были заполнены последующим вызовом REST), поэтому метод link не смог собрать всю таблицу. А потом, когда REST обновил коллекции, метод link больше не вызывался...

Есть идея вызвать директиву после ответа REST и заполнить мою таблицу собранными данными?

Директива с angular.forEach:

myApp.directive('myTable', ['$compile', function (compile) {
var linker = function (scope, element, attrs) {
    var html = '<table BORDER="1"><thead>';
    html += '<tr><th><button type="submit" class="btn btn-info">Back</button></th>';
    angular.forEach(scope.myFirstCol, function (item, index) {
        html += '<th colspan="{{item.mySecondCol.length}}" id="item_{{item.id}}">    {{item.name}}</th>';
    });
    html += '</tr><tr><th><input type="checkbox" ng-model="selectAll"/></th>';
    angular.forEach(scope.myFirstCol, function (item2, index) {
        angular.forEach(item2.mySecondCol, function (item3, index) {
            html += '<th id="headerStep_{{item3.id}}">{{item3.name}}</th>';

        });
    });
    html += '</tr></thead>';
    html += '</table>';
    element.replaceWith(html);
    compile(element.contents())(scope);
    };

    return {
    restrict: 'E',
    rep1ace: true,
    link: linker,
    scope: {
        myFirstCol: '=myFirstCol'
    }
};

}]);

Answer 1

Если вы не хотите использовать директиву, вы можете использовать вложенные таблицы:

<table BORDER="1">
    <thead>
        <tr>
            <th>
                <button type="submit" class="btn btn-info">Back</button>
            </th>
            <th ng-repeat="item in myFirstCol">{{item.name}}</th>                
        </tr>
        <tr>
            <th>
                <input type="checkbox" ng-model="selectAll" />
            </th>
            <th ng-repeat="item in myFirstCol">
                <table BORDER="1">
                    <tr>
                        <th ng-repeat="item2 in item.mySecondCol">
                            {{item2.name}}
                        </th>
                    </tr>
                </table>
            </th>                
        </tr>
    </thead>
</table>