对象内对象内的对象的嵌套ng-repeat [英] nested ng-repeat for object within an object within an object

问题描述

我想使用angular-js ng-repeat实现上述图像。我的第三栏出了问题。

I want to achieve the above image using angular-js ng-repeat. i got a problem for the third column.

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

这是我到目前为止所尝试的，输出不是我想要的，如示例中所示图片。问题是如何输出父表中第三个技能的最后数据。

This is what i have tried so far and the output is not what i want as shown in the sample image. The problem is how to output the last data which is skills in the third of the parent table.

推荐答案

找到答案，而不是非常好，因为它不断重复tbody但它仍然可以

Found an answer, not quite good since it keeps repeating the tbody but its still ok

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

这篇关于对象内对象内的对象的嵌套ng-repeat的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！