AngularJS动态表，具有基于分层集合的多个标头

Question

我正在尝试基于分层集合创建一个包含两行标题的表。我发现ng-repeat无法做到这一点，我正在尝试使用指令和Angular.forEach来完成这项工作。

这里是jsfiddle：http://jsfiddle.net/echterpat/RxR2M/9/

但我的问题是，当我第一次显示表时，集合是空的（之后它们被 REST 调用填充），所以链接方法无法构建所有表。然后当 REST 更新集合时，不再调用链接方法......

有什么想法在 REST 答案后调用指令，并用收集的数据填充我的表吗？

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