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

Question

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

Здесь jsfiddle: http://jsfiddle.net/echterpat/RxR2M/9/

Но моя проблема в том, что, когда я сделал первый показ таблицы, коллекции были пусты (они были заполнены REST вызова после нее), поэтому связь метод не смог построить все Таблица. И затем, когда обновленные коллекции REST, метод ссылок больше не вызывался ...

Любая идея, чтобы вызвать директиву после ответа 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>