Javascript 对象内对象的嵌套ng重复

Javascript 对象内对象的嵌套ng重复,javascript,angularjs,Javascript,Angularjs,我想用angular js ng repeat实现上面的图像。我对第三栏有个问题 <div tasty-table bind-resource-callback="showTCS.loadAllTCS" bind-init="showTCS.init" bind-filters="showTCS.listParams" bind-reload="showTCS.reloadCallback"> <table class="tabl

我想用angular js ng repeat实现上面的图像。我对第三栏有个问题

<div tasty-table
     bind-resource-callback="showTCS.loadAllTCS"
     bind-init="showTCS.init"
     bind-filters="showTCS.listParams"
     bind-reload="showTCS.reloadCallback">
    <table class="table table-striped table-condensed table-hover table-bordered table-overflow"
           cellpadding="4"
           cellspacing="4"
           align="center">
        <thead tasty-thead bind-not-sort-by="showMainCategory.notSortBy"></thead>
        <tbody>
            <tr ng-repeat="tcs in rows">
                <td>{{tcs.trackName}}</td>
                <td>
                    <table align="left">
                        <tbody>
                            <tr ng-repeat="category in tcs.category">
                                <td>{{category.categoryName}}</td>
                                <td>
                                    <table> //this one should be on the 3rd <td> of parent table
                                        <tbody>
                                            <tr ng-repeat="skill in category.skill">
                                                <td>{{skill.skillName}}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
                <td align="center">
                    <a ui-sref="mainCategoryDetails( {mainCatId: mainCategory.mainCat_id} )" class="glyphicon glyphicon-eye-open"></a>
                </td>
            </tr>
            <tr>
                <td ng-if="(!rows.length)" colspan="4" class="text-center">No results found.</td>
            </tr>
        </tbody>
    </table>
    <div tasty-pagination bind-items-per-page="showTCS.itemsPerPage" bind-list-items-per-page="showTCS.listItemsPerPage"></div>
</div>

{{tcs.trackName}
{{category.categoryName}
//这个应该在父表的第三个
{{skill.skillName}
没有发现任何结果。

这是我到目前为止尝试过的,输出不是我想要的,如示例图像所示。问题是如何输出父表第三部分中的最后一个数据。

找到了一个答案,不是很好,因为它不断重复tbody,但仍然可以

<div class="row-fluid" style="padding-top: 2%">
<div tasty-table
     bind-resource-callback="showTCS.loadAllTCS"
     bind-init="showTCS.init"
     bind-filters="showTCS.listParams"
     bind-reload="showTCS.reloadCallback">
    <table class="table table-striped table-condensed table-hover table-bordered table-overflow"
           cellpadding="4"
           cellspacing="4"
           align="center">
        <thead tasty-thead bind-not-sort-by="showTCS.notSortBy"></thead>
        <tbody ng-repeat="tcs in rows">
            <tr ng-repeat="category in tcs.category">
                <td class="text-center" style="vertical-align:middle;">{{tcs.trackName}}</td>
                <td class="text-center" style="vertical-align:middle;">{{category.categoryName}}</td>
                <td>
                    <ul class="list-unstyled" >
                        <li ng-repeat="skill in category.skill">{{skill.skillName}}</li>
                    </ul>
                </td>
                <td align="center">
                    <a ui-sref="mainCategoryDetails( {mainCatId: mainCategory.mainCat_id} )" class="glyphicon glyphicon-eye-open"></a>
                    <a ui-sref="editMainCategory( {mainCatId: mainCategory.mainCat_id} )" class="glyphicon glyphicon-edit"></a>
                    <a ui-sref="deleteMainCategory( {mainCatId:  mainCategory.mainCat_id} )" class="glyphicon glyphicon-minus-sign"></a>
                </td>
            </tr>
            <tr>
                <td ng-if="(!rows.length)" colspan="4" class="text-center">No results found.</td>
            </tr>
        </tbody>
    </table>
    <div tasty-pagination bind-items-per-page="showTCS.itemsPerPage" bind-list-items-per-page="showTCS.listItemsPerPage"></div>
</div>

{{tcs.trackName}
{{category.categoryName}
  • {{skill.skillName}
没有发现任何结果。

请发布您尝试过的内容。@Alexandru IonutMihai已经发布了我的代码,您可以在这里找到答案@SecretCoding,也请发布你的json。@MaoStream你给出的链接显示无序列表,这与我的问题不同。无序列表比表更易于处理