Angularjs 如何对colgroup、thead和tbody使用单个ng repeat动态呈现表列

我有列定义

JSON

，我想在

中的

上应用一些属性，在

中的

上应用一些属性，在

中使用单个

ng repeat

中的

上应用一些属性

通过在

、

、

或其直接父元素上使用多个

ng repeat

可以轻松实现。但我希望避免多次迭代

表格模板

<!-- language: lang-markup -->
<table id={{metaData.id}} name="{{metaData.name}}" class="{{metaData.classes}}">
    <colgroup>
        <col ng-repeat="col in metaData.columns" class="{{col.classes}}" />
    </colgroup>
    <thead>
        <tr>
            <th 
                ng-repeat="col in metaData.columns"
                class="{{col.classes}}"
                ng-class="{'vk-sortable': col.sortable, 'vk-editable' : col-editable"
                >{{col.title}}</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td ng-repeat="col in metaData.columns"></td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td ng-repeat="col in metaData.columns"></td>
        </tr>
    </tbody>
</table>

{{col.title}}

列JSON

<!-- language: lang-js -->
{
"id": "tblCustomer",
"name": "tblCustomer",
"columns": [
    {
        "id" : "thCustIndex",
        "name" : "thCustIndex",
        "title" : "Sr. #",
        "classes" : "",
        "type" : "index",
        "sortable" : "true",
        "editable" : "false"
    },
    {
        "id" : "thCustId",
        "name" : "thCustId",
        "title" : "Id",
        "classes" : "align-center",
        "type" : "text",
        "sortable" : "true",
        "editable" : "false"
    },
    {
        "id" : "thCustName",
        "name" : "thCustName",
        "title" : "Name",
        "classes" : "",
        "type" : "text",
        "sortable" : "true",
        "editable" : "false"
    },
    {
        "id" : "thCustDob",
        "name" : "thCustDob",
        "title" : "Date Of Birth",
        "classes" : "",
        "type" : "date",
        "sortable" : "true",
        "editable" : "false"
    },
    {
        "id" : "thCustMobile1",
        "name" : "thCustMobile1",
        "title" : "Mobile 1",
        "classes" : "",
        "type" : "inMobile",
        "sortable" : "true",
        "editable" : "false"
    },
    {
        "id" : "thCustEmail",
        "name" : "thCustEmail",
        "title" : "E-mail Id",
        "classes" : "align-center",
        "type" : "email",
        "sortable" : "true",
        "editable" : "false"
    },
    {
        "id" : "thCustAddress",
        "name" : "thCustAddress",
        "title" : "Address",
        "classes" : "",
        "type" : "text",
        "sortable" : "true",
        "editable" : "false"
    }
]

{
“id”：“TBL客户”，
“名称”：“TBL客户”，
“栏目”：[
{
“id”：“thCustIndex”，
“名称”：“thCustIndex”，
“头衔”：“Sr.#”，
“类别”：“，
“类型”：“索引”，
“可排序”：“true”，
“可编辑”：“假”
},
{
“id”：“thCustId”，
“名称”：“thCustId”，
“标题”：“Id”，
“类”：“对齐中心”，
“类型”：“文本”，
“可排序”：“true”，
“可编辑”：“假”
},
{
“id”：“thCustName”，
“名称”：“名称”，
“标题”：“名称”，
“类别”：“，
“类型”：“文本”，
“可排序”：“true”，
“可编辑”：“假”
},
{
“id”：“thCustDob”，
“名称”：“thCustDob”，
“头衔”：“出生日期”，
“类别”：“，
“类型”：“日期”，
“可排序”：“true”，
“可编辑”：“假”
},
{
“id”：“thCustMobile1”，
“名称”：“thCustMobile1”，
“标题”：“移动1”，
“类别”：“，
“类型”：“inMobile”，
“可排序”：“true”，
“可编辑”：“假”
},
{
“id”：“thCustEmail”，
“名称”：“thCustEmail”，
“标题”：“电子邮件Id”，
“类”：“对齐中心”，
“类型”：“电子邮件”，
“可排序”：“true”，
“可编辑”：“假”
},
{
“id”：“thCustAddress”，
“名称”：“地址”，
“标题”：“地址”，
“类别”：“，
“类型”：“文本”，
“可排序”：“true”，
“可编辑”：“假”
}
]

}