基于分层集合的具有多个标题的AngularJS动态表答案

【问题标题】：AngularJS dynamic table with multiple headers based on hierarchical collections基于分层集合的具有多个标题的AngularJS动态表
【发布时间】：2013-09-10 08:55:32
【问题描述】：

我正在尝试基于分层集合创建一个包含两行表头的表。我发现 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'
    }
};

}]);

【问题讨论】：

标签： angularjs angularjs-directive angularjs-ng-repeat tableheader

【解决方案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>

【讨论】：